CODEWITHSUNDEEP
htmlcss
Optimiz
Optimiz

Reputation: 53

CSS Style First Letter of Every Paragraph Following an H1?

I need to increase the font-size to 200% of every first letter of every paragraph that is following an H1 (header).

i.e.

<h1> This is a header </h1>
<p>The first 'T' in this paragraph needs to be set to 200%</p>

<ul>
   <li>Random list item 1</li>
   <li>Random list item 2</li>
</ul>

<p>The first 'T' in this paragraph does NOT need to be set to 200% as it doesn't follow an H1</p>

The closest I've gotten is using p::first-letter {font-size: 200%;} but that clearly doesn't work as it selects the first letter of every paragraph. I have been googling and trying to figure out how to select just the ones that follow an H1 forever now. I appreciate the help.

Upvotes: 3

Views: 473

Answers (3)

Nnah Kenneth
Nnah Kenneth

Reputation: 47

span{
font-size: 3rem;
}
<h1><span>f</span>irst text styled font</h1>

Upvotes: 0

Ravi Bhati
Ravi Bhati

Reputation: 15

Try this one, it might help you

h1 ~ p:first-letter {font-size: 200%;}

Upvotes: 0

j08691
j08691

Reputation: 207901

You can use h1 + p::first-letter:

h1 + p::first-letter {font-size: 200%;} 
<h1> This is a header </h1>
<p>The first 'T' in this paragraph needs to be set to 200%</p>

<ul>
   <li>Random list item 1</li>
   <li>Random list item 2</li>
</ul>

<p>The first 'T' in this paragraph does NOT need to be set to 200% as it doesn't follow an H1</p>

The + selects only the adjacent sibling (in this case, only a <p> that immediatley follows a <h1>).

Upvotes: 9

Related Questions