If you have this html:
Fiddle: https://jsfiddle.net/qujo0w00/
<article class="type-a">Content A</article>
<article class="type-b">Content B</article>
<article class="type-b">Content B</article>
<article class="type-b">Content B</article>
<article class="type-b">Content B</article>
<article class="type-a">Content A</article>
<article class="type-b">Content B</article>
<article class="type-b">Content B</article>
<article class="type-a">Content A</article>
<article class="type-b">Content B</article>
<article class="type-b">Content B</article>
How do you target every second element that HAS type-b class? Because, if you use
.type-b:nth-of-type(2n+2) { background-color: red; }
it targets the 2nd article, even if the first article doesn't have type-b class. And then it seems to work randomly, skipping 3 articles at one point.
I'm really confused over what is going on, can anyone shed any light on this?
I even tried:
article:not(.type-a):nth-of-type(2n+2) { background-color: red; }
but still same issue.