Question

This is the CSS:

p + p {
 text-indent: 1.1em;
 margin-top: 0;
}
p {
 font-family: 'Crimson Text', serif;
 margin: 0;
}

HTML:

<p>...<p>
<p>...</p> (new paragraph)
<p><br><p>
<p></p> (new scene)

(This is WordPress’ default text editor)

I’m not sure how it works (I took it form a site that I can’t remember).
It produces this:

There is only one problem. The third paragraph is a new scene and it shouldn’t be indented. I wonder if there is a way of fixing this with CSS? (CSS3 is OK)

EDIT:

I guess jQuery is the only way? Any suggestions of doing it with jQuery?

Answer 1

I would say to structure it out into scenes.

Markup:

<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>
<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

And some CSS:

.scene p { text-indent: 1.1em; }
.scene p:first-child { text-indent: 0; }

That cleans up your markup, and enables consistency across the board. (This is also ie7/8-friendly)