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

i have following list (the numbers 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 apply 1 style divs 1, 3 , 7, because first of class (a) in row of elements of same class. there pseudo element / magic can use that? (inventing)

not(.a) & .a {color:red} -> if class , not preceded 

thanks!

you use :not() pseudo-class adjacent sibling combinator + match .a not preceded .a:

:not(.a) + .a 

you'll need use :first-child select first .a element since it's not preceded anything:

.a:first-child 

combine them, , have:

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

jsfiddle demo