Quote:
Originally Posted by meme
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
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>