26 replies

How to select first letter of a paragraph inside a div?

My HTML looks like this

<div class="post-content">
<p>First</p>
<p>Second</p>
</div>

<div class="post-content">
<p>First</p>
<p>Second</p>
</div>

<div class="post-content">
<p>First</p>
<p>Second</p>
</div>

<div class="post-content">
<p>First</p>
<p>Second</p>
</div>

I want the first letter of the first paragraph (F) to be capitalized. This is my CSS attempt

div:is(.post-content) > p::first-letter {
  font-size: 2.5rem;
}

div:is(.post-content) > p::first-letter {
  font-size: 2.5rem;
}

div:is(.post-content) > p::first-letter {
  font-size: 2.5rem;
}

div:is(.post-content) > p::first-letter {
  font-size: 2.5rem;
}

But this is making the first letter of every paragraph larger. I only want the first paragraph targeted. I think I should be using something like

first-child

first-child

first-child

first-child but I haven't found the right combination of selectors to make it work.