css selector: first paragraph's first letter inside a div

Question

<div>
 <p>
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

How can I select (in my css) the first letter of the first paragraph inside this div??

Thanks

Luca

Answer 1

div p:first-of-type:first-letter { font-weight: bold; }

Answer 2

In some cases you may have a header or some other elements types before the <p> For example:

<div>    
<h1>My Great Title</h1>
<p>
In my younger years I was a great man, but all that changed when I saw...
</p>
<p>
I struck him for shaming my name, my family, my life. It was a shameful...
</p>
</div>

So in this case, p:first-child won't work for some reason, at least not in Chrome or Safari.

So instead you'll want to use this:

div p:first-of-type:first-letter{
/* add your awesome code here */
}

Thank you for your time.

first-of-type