How would I target this div using CSS?

Question

In the code below, how would I target the second div.b using CSS?

<div>   <div class="a"></div>   <div class="a"></div>   <div class="a"></div>   <div class="b"></div>   <div class="b"></div>   <div class="a"></div> </div> 

Answer 1

In this particular instance, you could use the adjacent sibling combinator, +.

EXAMPLE HERE

.b + .b {    color:red; } 

---

The above assumes there are no more than two, adjacent .b elements. If this wasn't the case, the general sibling combinator, ~, would be more useful assuming there are still only two .b elements.

EXAMPLE HERE

.b ~ .b {     color:red; } 

---

As an alternative, you could also use the following, which will work with multiple .b elements, regardless of position. Initially, use .b ~ .b to set the styling of the second, targeted element. You would then need to use .b ~ .b ~ .b to reset the styling of the .b elements following the second .b element.

EXAMPLE HERE

.b ~ .b {     color:red; } .b ~ .b ~ .b {     color:initial; } 

This should theoretically work in all instances, for example:

<div class="a">1a</div> <div class="a">2a</div> <div class="a">3a</div> <div class="b">1b</div> <div class="a">4a</div> <div class="b">2b</div> <!-- This would be styled red.. --> <div class="b">3b</div> 

It's also worth noting that the value initial isn't supported in IE. You could therefore use color:#000 to reset the color back to the defaults. Alternatively, inherit would work too.

As a more practical example, you could use something like this:

EAXMPLE HERE

.b ~ .b {     width:200px;     background:blue;     color:#fff; } .b ~ .b ~ .b {     width:auto;     background:transparent;     color:#000; }