Difference between div > p and first-child selector???

Are these two concepts the same thing? Since div > p would select a p that is the immediate child of the div and using a first-child selector would select the first-child of the div.

If there is a difference could you please point them out I tried it with the following example?

<!DOCTYPE HTML>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <title>HTML Reference</title>
  </head>
  <body>
    <p>Introduction: Cascading with CSS</p>
            <div>
                <p>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
                If, however, you change that same property to a different value for a more specific instance of p,
                that change will <em>override</em> the 'general rule'.
                </p>
                <ul>
                    <li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
                    <li><p>BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
                           in Garamond, and 'p's INSIDE 'li's will be in Verdana.
                    </p></li>
                    <li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
                </ul>
            </div>
            <p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
  </body>
</html>

I utilized this html content with the following CSS:

div > p {
  color:red;
}

p:first-child {
  color:blue;
}

And it seems that the first-child overrides the “div > p” for some reason. Can anyone provide me a explanation as to why “first-child” is more specific than “div > p”?

Answer 521f4862abf82150410035f5

1 vote

Permalink

First off, you misunderstood something:

Are these two concepts the same thing? Since div > p would select a p that is the immediate child of the div and using a first-child selector would select the first child of the div

They are indeed quite different.

The immediate descendant selector (div > p) selects any <p> that are direct children (but not “grandchildren”) of some <div>, so not just the first one.

The :first-child pseudo-class selects an element that is the first child of its parent, and that parent can be anything, for instance, <body>, <div>, or <li>. So p:first-child selects almost all <p> elements in your HTML (with the exception of the second p child of your <div>, see JSBin).

Now to the question why the first <p> inside the <div> is blue, even though the div > p selector tries to make it red. The p:first-child is indeed more specific here because :first-child is a pseudo-class, and has the same specificity as a class selector such as .test. (Pseudo-)classes have a higher specificity than element selectors (such as div and p). In fact, no number of element selectors can outweigh a single (pseudo-)class selector, thus even if you had body > div > p, that would be less specific than p:first-child.