No replies
dustnik
dustnik's picture
Offline
newbie
Last seen: 17 weeks 5 days ago
Timezone: GMT-5
Joined: 2020-05-11
Posts: 1
Points: 2

I've written a multi-chapter story at a fanfiction site that only allows the user-submitted portion of the page to be styled with CSS using an external file. All CSS commands must be predicated with the id #workskin and the actual story part (rather than the summary or notes part) with the classes .userstuff.module

I've styled the first letter of the first paragraph of each chapter as follows:

#workskin .userstuff.module p:first-of-type::first-letter {
    font: 2.5em Georgia, serif;
    line-height: 1;
    color: indianred;
}

This works perfectly until the last chapter which reads something like this:

<p>text</p>
<p>more text</p>
<div>
<p>text</p>
<p>more text</p>
</div>
<p>text></p>
<p> more text</p>

The problem is the first letter in the first paragraph of the div is also being styled which I don't want. Other than styling that one character separately, is there anything I can add to my original CSS to prevent this. I looked at the :not and :first-child pseudo classes, but I'm not sure how they'd work. I'm fairly new to coding and want to learn the proper way to do things. Thank you for any help you can give me with this.