Question

I will try to make my problem as clear as I can, so please bear with me! 🙂

I have something like the following html. Please note that each div in #container can be repeated any number of time in my application. So it’s possible that div.a will not the there, or that I’ll have more than one.

<div id="container">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="b">3</div>
  <div class="b">4</div>
  <div class="b">5</div>
  <div class="c">6</div>
</div>

In the above html, I want a css selector for div #3 and #5. Using div.b + div.b affects all div.b except the first one of the streak. Using div.b:nth-child(even) is starting its count at div #1, so div #2 gets selected and I don’t need it to.

What I need is to be able to select all the even div.b in a streak, without being affected by whatever is before or after the streak. And I’d like to avoid using JavaScript. Any idea?

Answer 1

I’m adding this answer in case someone finds this question from a search engine.

After many hours of research, there is no magical all css answer to this. Don’t waste as much time as I did on this, and go with the “odd” and “even” class in the markup. 🙂