css - Apply style to first element in a row of similar elements

Question

I have the following list (the numbers are just for reference)

<div class="A">alpha1</div>
<div class="B">alpha2</div>
<div class="A">alpha3</div>
<div class="A">alpha4</div>
<div class="A">alpha5</div>
<div class="B">alpha6</div>
<div class="A">alpha7</div>

I want to apply one style to DIVS 1, 3 and 7, because they are the first of their class (A) in a row of elements of the same class. Is there a pseudo element / magic I can use for that? Something like (inventing)

not(.A) & .A {color:red} -> if class is A and it is not preceded by an A

Thanks!

Answer 1

You use the :not() pseudo-class with an adjacent sibling combinator + to match an .A that is not immediately preceded by an .A:

:not(.A) + .A

You'll also need to use :first-child to select the very first .A element since it's not preceded by anything:

.A:first-child

Combine them, and you have:

:not(.A) + .A, .A:first-child { color: red; }

jsFiddle demo