Pseudo classes with classes

[Macsurfcat]

I would like to select the first instance of a classed element (eg: <p class="attribution">) in a sequence of same classed elements for differential styling via a CSS:

<p class="attribution"> Harry Summers</p>
<p class="attribution">King of Heartland</p>
<p class="attribution">Companion to the Queen</p>

I've tried "first-of-type" but with no luck.

[Jellby]

I think :first-of-type is only CSS3 (and it would target the first <p>, provided it has a given class, not the "first p with a given class", I believe), so don't expect ePub 2 renderers to support it.

Maybe you can invert the selection. "p.attribution + p.attribution" would target the second and later of the series, which you could use to "cancel" the style you asign to "p.attribution".

But, the best is probably adding an additional class:

<p class="attribution first"> Harry Summers</p>
<p class="attribution">King of Heartland</p>
<p class="attribution">Companion to the Queen</p>

and then use "p.attribution.first"

[PeterT]

How about

.attribution {  background-color: red;}
.attribution + .attribution {    background-color: green;}

[Macsurfcat]

yes, have suggested adding another class, "first", that would solve all any and all problems, but I really like the reversal.

[dgatwood]

Originally Posted by Jellby

I think :first-of-type is only CSS3 (and it would target the first <p>, provided it has a given class, not the "first p with a given class", I believe), so don't expect ePub 2 renderers to support it.

CSS4 offers :nth-match(). I wouldn't expect any reader to support it yet, though iBooks might support it in 10.11/iOS 9 and later if they've whitelisted it and if support made it into WebKit in time for that release. (I haven't tried.)

I think the syntax would be something like:

p:nth-match(0n+1 of .bar) {
...
}

but don't quote me on that.

With that said, either the next sibling operator (PeterT's suggestion) or the generic sibling selector will probably work, depending on whether you want the first matching paragraph after any non-matching paragraph to be formatted like the first matching paragraph. If you don't, then do something like this instead:

.attribution {  background-color: red;}
.attribution ~ .attribution {    background-color: green;}