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

You're looking for the :first-of-type psuedo selector! So, you'd do this to get that first paragraph:

#content p:first-of-type

Answer 2

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 */ }