Target first `li` having specific class inside `ul` with css only

Question

Is it possible to target first li having specific class inside ul? for example :

 <ul>
     <li class="a"></li> <!-- I want to target this li -->
     <li class="a"></li>
     <li class="a"></li>
     <li class="b"></li> <!-- and this li -->
     <li class="b"></li>
     <li class="b"></li>
 </ul>

Any possibility?

Answer 1

Use the :first-child pseudo-class and the adjacent sibling selector +.

.a:first-child, /* Select the first child element */
.a + .b { /* Select the first element with 'b' class */
  background-color: dodgerblue;
}

<ul>
  <li class="a"></li>
  <li class="a"></li>
  <li class="a"></li>
  <li class="b"></li>
  <li class="b"></li>
  <li class="b"></li>
</ul>

Answer 2

try selector :nth-child() and :first-child

ul li:first-child {  
//some css 
}

and

ul li:nth-child(4) {
 //some css
}