CODEWITHSUNDEEP
javascripthtmlcss
user16410512
user16410512

Reputation:

Select elements in CSS

Given this code in HTML:

<body>
    <pre class="typescript">
      <span class="classDecl">    
        <span class="statement">export</span> 
        <span class="keyword">class</span> 
        <span class="identifier">Sample</span> 
        <span id="open1">{</span>
        <span class="keyword">private</span> 
        <span class="marked">
          <span class="identifier">name</span>: 
          <span class="type">string</span>
        </span>;
        <span class="ctorDecl">
          <span class="keyword">constructor</span>
          <span id="open2">(</span>
          <span class="marked">
            <span class="identifier unused">name</span>: 
            <span class="type">string</span>
          </span>
          <span id="close2">)</span> 
          <span id="open3">{</span>
          <span class="keyword">this</span>.
          <span class="identifier">name</span> = 
          <span class="error">
            <span class="identifier">name1</span>
          </span>;
          <span id="close3">}</span>
        </span>
        <span class="methodDecl">
          <span class="identifier">greeting</span>
          <span id="open4">(</span>
          <span id="close4">)</span>: 
          <span class="type">string</span> 
          <span id="open5">{</span>
          <span class="statement">return</span> 
          <span class="stringliteral">"Hello "</span> + 
          <span class="keyword">this</span>.
          <span class="identifier">name</span>;
          <span id="close5">}</span>
        </span>
        <span id="close1">}</span>
      </span>
    </pre>
</body>

Im trying to select the :, ; , = and + symbols but I dont know how. (One is at line 8)

I tried googling but none of the answers worked.

Upvotes: 0

Views: 53

Answers (1)

Peter O Brien
Peter O Brien

Reputation: 191

Following solution works with 6 css classes, and some layered specificity

https://jsfiddle.net/tadpole/pthgxqny/1/

.classDecl{
  color: red;
}
.classDecl > span{
  color: black;
}
span.ctorDecl{
  color: red;
}
span.ctorDecl > span{
  color: black;
}
span.methodDecl{
  color: red;
}
span.methodDecl > span{
  color: black;
}

Upvotes: 1

Related Questions