General Sibling Selector

AuthorGreg · 11-20-2013, 12:08 AM

I just discovered that using a general sibling selector doesn't work for ePubs, at least not in ADE. My code was this:

Code:

h1  ~ p {
    font-size: 1.3em;
    margin-top: 1em;
    font-style: italic;
    text-indent: 0;
    text-align: center;
}

That, I suppose, is only supported in CSS3. And therefore not valid in ePub 2.0? It passed validation, but again, ADE didn't render it.

Thanks,

Greg

GrannyGrump · 11-20-2013, 02:37 AM

If you want only the first paragraph after h1 to have this styling, get rid of the tilde and use the plus sign. Just use:

Code:

h1 +p {
    font-size: 1.3em;
    margin-top: 1em;
    font-style: italic;
    text-indent: 0;
    text-align: center;
}

The plus sign can be used to style siblings for styled paragraphs, divs, blockquotes, etc. I have one frequently used one that looks like this:

Code:

.ind0,
.scndrop,
.scnbrk +p, 
h2 +p,
h3 +p,
div.qnote p {
text-indent: 0em;
}

The ones with the "+" style the first paragraph that *follows* that tag. The last one listed, div.qnote p with no "+", styles all the paragraphs *inside* that div.

As far as I know, it is valid in epub2, and is supported very widely in devices and software.

Toxaris · 11-20-2013, 03:31 AM

Since it is a CSS3 selector, it will definetly not work. Ones that work are:
<element> <element>
<element>, <element>
<element> + <element>

Perhaps more, but those in any case.

AuthorGreg · 11-20-2013, 04:36 PM

I just did a div id on it instead. Too bad we can't use all the nifty tag selectors of CSS3. Well, not yet anyway....

11-20-2013, 12:08 AM	#1
AuthorGreg Connoisseur Posts: 61 Karma: 10 Join Date: Jul 2012 Device: Nook Simple Touch, Kindle 2nd Gen, Kindle 7" Fire HD	General Sibling Selector I just discovered that using a general sibling selector doesn't work for ePubs, at least not in ADE. My code was this: Code: h1 ~ p { font-size: 1.3em; margin-top: 1em; font-style: italic; text-indent: 0; text-align: center; } That, I suppose, is only supported in CSS3. And therefore not valid in ePub 2.0? It passed validation, but again, ADE didn't render it. Thanks, Greg

11-20-2013, 02:37 AM	#2
GrannyGrump Obsessively Dedicated... Posts: 3,255 Karma: 35164265 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	If you want only the first paragraph after h1 to have this styling, get rid of the tilde and use the plus sign. Just use: Code: h1 +p { font-size: 1.3em; margin-top: 1em; font-style: italic; text-indent: 0; text-align: center; } The plus sign can be used to style siblings for styled paragraphs, divs, blockquotes, etc. I have one frequently used one that looks like this: Code: .ind0, .scndrop, .scnbrk +p, h2 +p, h3 +p, div.qnote p { text-indent: 0em; } The ones with the "+" style the first paragraph that follows that tag. The last one listed, div.qnote p with no "+", styles all the paragraphs inside that div. As far as I know, it is valid in epub2, and is supported very widely in devices and software.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
:first-letter selector support in KF8	Doitsu	Kindle Formats	42	09-21-2013 06:49 AM
New YA Hockey Novel Classic for $2.99 - Sports & Sibling Rivalry	stacyj	Self-Promotions by Authors and Publishers	6	12-09-2011 01:36 PM
Classic Nook crashes on epub with css * selector.	aarcane	Barnes & Noble NOOK	3	10-08-2010 05:17 PM
Cool Reader and key 9 in Hyphenation language selector	CPatrick	OpenInkpot	6	04-19-2010 10:02 AM

11-20-2013, 03:31 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Since it is a CSS3 selector, it will definetly not work. Ones that work are: <element> <element> <element>, <element> <element> + <element> Perhaps more, but those in any case.

11-20-2013, 04:36 PM	#4
AuthorGreg Connoisseur Posts: 61 Karma: 10 Join Date: Jul 2012 Device: Nook Simple Touch, Kindle 2nd Gen, Kindle 7" Fire HD	I just did a div id on it instead. Too bad we can't use all the nifty tag selectors of CSS3. Well, not yet anyway....

Advert