For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
Add a comment
|
8 Answers
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1
That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.
An illustration comparing the child combinator with the descendant combinator:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>Which elements are matched by which selectors?
Matched by both
div > p.some_classanddiv p.some_class
Thisp.some_classis located directly inside thediv, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.Matched by only
div p.some_class
Thisp.some_classis contained by ablockquotewithin thediv, rather than thedivitself. Although thisp.some_classis a descendant of thediv, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
15 Comments
alex
+1 Is it really called a child selector? If so, that is pretty misleading. I would of thought
#something a would be a child selector.
robertc
@alex it's called the child combinator, the space is called the descendent combinator
Quentin
When someone is their grandparent's child, we're dealing with a really nasty instance of incest. Happily, that is impossible in HTML.
BoltClock
I don't hear any laymen calling their kids their direct children for the sake of clarity.
|
> (greater-than sign) is a CSS Combinator(Combine + Selector).
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
3 Comments
YCode
@premraj Thank you for the excellent explanation of parent-child css selectors!
YCode
What does it mean then when you get something like
.entry-content > * {"code" } which is followed by .entry-content {"other code" }? Doesn't .entry-content > * cover all the children of entry-content?As others mention, it's a child selector. Here's the appropriate link.
2 Comments
Misha Moroshko
Thank you very much for the link ! I discovered also the "Adjacent sibling selectors" there.
FelipeAls
You'll find browser support on Sitepoint. Doesn't work in IE6 if it matters for your projects, OK everywhere else. This resource is esp. useful for siblings, :nth-child() etc where support is still incomplete
It matches p elements with class some_class that are directly under a div.
Comments
( child selector) was introduced in css2.
div pselect all p elements who are decedent of div element, whereasdiv > pselect only child p elements, not grand child, great grand and so on.
<style>
div p{ color:red } /* match all p in div */
div > p{ color:blue } /* match only children p of div*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
<p>para tag, child and decedent of p.</p>
</div>
For more information on CSS Ce[lectors and their use, check my blog, css selectors and css3 selectors
Comments
All p tags with class some_class which are direct children of a div tag.
Comments
html
div > p.some_class{
color:red;
}<html>
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
</html>All the direct children that are <p> with .some_class would get the style applied to them.
1 Comment
FabianoLothor
Totally wrong, second line is red too.
The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.
An example:
article > p { }
Means only style a paragraph that comes after an article.
