01-06-2016, 11:28 AM | #1 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Apr 2013
Location: New Jersey
Device: Kindle, Nook
|
Pseudo classes with classes
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. |
01-06-2016, 11:43 AM | #2 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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: Code:
<p class="attribution first"> Harry Summers</p> <p class="attribution">King of Heartland</p> <p class="attribution">Companion to the Queen</p> |
Advert | |
|
01-06-2016, 02:52 PM | #3 |
Grand Sorcerer
Posts: 12,263
Karma: 74007256
Join Date: Nov 2007
Location: Toronto
Device: Nexus 7, Clara, Touch, Tolino EPOS
|
How about
Code:
.attribution { background-color: red;} .attribution + .attribution { background-color: green;} |
01-06-2016, 04:09 PM | #4 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Apr 2013
Location: New Jersey
Device: Kindle, Nook
|
yes, have suggested adding another class, "first", that would solve all any and all problems, but I really like the reversal.
|
01-07-2016, 04:00 AM | #5 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
I think the syntax would be something like: Code:
p:nth-match(0n+1 of .bar) { ... } 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: Code:
.attribution { background-color: red;} .attribution ~ .attribution { background-color: green;} |
|
Advert | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Multiple classes compatibility | senhal | ePub | 5 | 11-23-2015 08:00 PM |
Aura HD Micro SD Card - All about Classes | xibalban | Kobo Reader | 7 | 09-18-2014 11:49 AM |
Classes in CSS in recipes? | Tegan | Recipes | 10 | 01-17-2011 07:30 PM |