My objective: To have all paragraphs indented except for the ones following the .firstCharacter class.
In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using...
.storyContainer p + p {
text-indent: 1.5em;
margin-top: 0
}
To style my drop cap, I am utilizing...
.firstcharacter {
float: left;
font-size: 80px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: 'Droid Serif', serif;
}
Here is how my HTML code looks like...
<div class="headline">This is a headline!</div>
<p><span class="firstcharacter">T</span>his text is NOT indented because it's the first one.</p>
<p>This text will be indented because it's the second one.</p>
<p>This text will be indented because it's the third one.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't happen because it is the first one after the box!</p>
<p>This text will be indented because it's the second one.</p>
<div class="headline">This is another headline!</div>
<p><span class="firstcharacter">T</span>his text is also NOT indented because it's the first one.</p>
<p>This text will be indented because it's the second one.</p>
<p>This text will be indented because it's the third one.</p>
<div class="someBox">This is another extra box</div>
<p>I want this to be indented but it won't be because it's the first one after the box!</p>
<p>This text will be indented because it's the second one.</p>
Any suggestions on how to address this issue?
Thank you!