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
First off, you misunderstood something:
Are these two concepts the same thing? Since
div > pwould select apthat is the immediate child of thedivand using afirst-childselector would select the first child of thediv
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.
For details, read this excellent illustrated article by Chris Coyier.
Popular free courses
- In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.
- Beginner Friendly.4 Lessons
- Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
- Beginner Friendly.11 Lessons
- Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
- Beginner Friendly.6 Lessons
