Why first paragraph not taking this style p:first-child?

Question

Why first paragraph not taking this style p:first-child

#content p:first-child {color:#4C4C4C;
font-size:1.2em;
font-weight:bold;
line-height:1.8;
margin-bottom:0.5em;}


<div id="content">
 <h1>Welcome</h1>
   <p>first paragraph</p>
   <p>second paragraph</p>
   <p>third paragraph</p>
</div>

How to select first paragraph from css?

Answer 1

The selector matches any p element which is the first child of its parent.

In this case the p is the second child of its parent.

Have a look at: ttp://www.w3schools.com/css/pr_pseudo_first-child.asp

Answer 2

the content of P isn't its first child - from what I've seen a tag such as or would be the first child not the actual content.

Answer 3

While the previous answers have already defined the problem (that the p isn't the first child of the parent div), here's a solution to your problem, to target the first p that follows a h1, depending on your browser:

h1 + p { /* styles any paragraph that immediately follows a h1 element */ }