For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the >
sign mean?
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the >
sign mean?
>
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_class
and div p.some_class
This p.some_class
is located directly inside the div
, 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
This p.some_class
is contained by a blockquote
within the div
, rather than the div
itself. Although this p.some_class
is a descendant of the div
, 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”.