css - Select even and odd childs of a particular class after a specific class child

Question

HTML:

<div id="container">
  <div class="b">b7</div>
  <div class="b">b8</div>
  <div class="a">a1</div>
  <div class="b">b1</div>
  <div class="b">b2</div>
  <div class="b">b3</div>
  <div class="a">a2</div>
  <div class="a">a3</div>
  <div class="b">b4</div>
  <div class="b">b5</div>
  <div class="b">b6</div>
</div>

I want odd siblings of class b which comes after class 'a' i.e b1, b3, b4, b6 (should not b7)are to be selected. is it possible using CSS?

Answer 1

Yes you can (you do mean even tho, instead of odd, if you want to select b1, b3, b4 and b6):

.a ~ .b:nth-child(even) {
    color: red;
}

Also check this demo