[ACCEPTED]-css selector: first paragraph's first letter inside a div-css-selectors

Accepted answer

Score: 26

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

Score: 8

In some cases you may have a header or some 5 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 4 in this case, p:first-child won't work for some reason, at 3 least not in Chrome or Safari.

So instead 2 you'll want to use this:

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

Thank you for your 1 time.

first-of-type

Score: 1

You can use the CSS :first-letter pseudo-element to apply 2 style to the first letter of a block-level 1 element.

Score: 0

Well, I would add at least a class to the 15 element you want the first-letter styling 14 to be applied to. I'm sure you can do a 13 css rule for the first paragraph of the 12 first div; but if you happen to have another 11 div with a paragraph at the beginning, then 10 it is going to be applied to all of them. In 9 other words, without using a class/id in 8 your selector, it will be applied to the 7 first letter of the first paragraph of EVERY DIV (which 6 might not be the behavior you're looking 5 for). So I would recommend this:

<div>
 <p class="FirstLetter">
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

And then 4 in your css:

.FirstLetter:first-letter {
   // styling rules here
}

But if my intuition is incorrect 3 and you know for sure that this is what 2 you're looking for, then @Demian Brecht's 1 answer should do fine.

Source: stackoverflow.com

[ACCEPTED]-css selector: first paragraph's first letter inside a div-css-selectors

How to use css first-child with :not()

What are the priorities among CSS selectors

CSS class and descendant selectors practices

Css style priority

How to select all non-empty anchor links with a CSS selector?

CSS selector for id starting with hash (#)

how to select all list items except for the first and last using CSS only?

Change style of an element when focus is another element

How to select the last element within an element regardless of type in CSS?

Does a CSS "#id element" select grandchildren as well?