View Single Post
Old 07-21-2012, 04:07 AM   #15
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,075
Karma: 4571547
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by meme View Post
The CSS selector "h3 + p" just means an h3 tag immediately followed by a p tag.
Nitpicking, but it actually means a <p> tag immediately following an <h3> tag. The difference is that it styles the <p> tag, not the <h3>.

Quote:
Originally Posted by roger64 View Post
As h3 + p {/* first paragraph after a heading3 */ seems to be quite useful to display dropcaps, has anybody succeeded using it for a dropcap?
For a dropcap you'd have to use the :first-letter pseudo-element selector, which I believe is not properly supported everywhere. Otherwise, you'll be adding a <span> around the first letter, and in that case you don't need h3+p.

h3+p is useful to remove indent from the first paragraph, though. You can make it work with epigraphs, decorations, etc. by using something like "h3+p, .chapterhead + p { ... }". Now the same stuff applies to any <p> immediately following an <h3> or anything with the class "chapterhead". You just have to add this class to everything between the <h3> and the first <p> (actually, only to the last of these things is enough), like this:

Code:
<h3>Chapter Twelve</h3>

<div class="epigraph chapterhead">
Never say never.
</div>

<p>It was a dark and stormy night...</p>
Jellby is offline   Reply With Quote