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>

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;
}

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 but I haven't found the right combination of selectors to make it work.

19 Replies

Mannix•3y ago

.post-content > p:first-child::first-letter

13eck•3y ago

You'd want to do something like this:

.post-content:first-child:first-letter {
  /* do stuff here */
}

.post-content:first-child:first-letter {
  /* do stuff here */
}

~~Note that it's :first-letter not ::first-letter~~

b1mind•3y ago

it should be :: no?

jsollyOP•3y ago

Thanks! Weird, I just got this to work as well

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

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

13eck•3y ago

~~it's a pseudo-class not a pseudo-element, so only one :~~ You don't need the div:is(), just use the base class as your selector.

b1mind•3y ago

A combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. In that case, ::first-letter will match the first letter of this generated content.

Its tech a element

13eck•3y ago

And yes, pretty much the same as mine, but you chose to :first-of-type the paragraph where I targeted the children of the .post-content class

b1mind•3y ago

err quoted the wrong thing but yea mdn says its a element ::

13eck•3y ago

Wait, crap, I was looking at the wrong page :first-child is a pseudo-class and ::first-letter is pseudo-element. /sigh

jsollyOP•3y ago

There is a small chance the first child of the div is not a <p> and I only want to affect paragraphs, but I always want to affect the first paragraph. So in that case, I might not want to use the first child of .post-content

13eck•3y ago

I was going off of what you said the HTML looked like

jsollyOP•3y ago

yes, sorry.

13eck•3y ago

But if it doesn't look like you posted above then no, don't use my code lol

jsollyOP•3y ago

I think I understand what's going on! I need to read up on pseudo classes and pseudo elements, too! Thank you!!! I'm not sure how to mark posts as solved!

13eck•3y ago

If you right-click on the actual post in the main list you should have the option to edit tags

b1mind•3y ago

or just close it 😄 (had closed it)

13eck•3y ago

But if you close it it won't be marked as SOLVED, @b1mind There's a ✅ SOLVED tag now

jsollyOP•3y ago

Weird. I can't see how to add a new tag. I will have to read through the Discord docs. I see it got added somehow. Will close the post now, thanks! Oh, I see the edit-tags option when I hover over the post!

13eck•3y ago

👍

Gaming

Programming

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

Did you find this page helpful?