Css – What does the “>” (greater-than sign) CSS selector mean
csscss-selectors
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
Best Answer
> 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.
1Many 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".
According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and its earlier versions (but sadly still needs a vendor prefix).
These are all of the available correct CSS variations:
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
Note that user-select is in standardization process (currently in a W3C working draft). It is not guaranteed to work everywhere and there might be differences in implementation among browsers. Also, browsers can drop support for it in the future.
Best Answer
>
is the child combinator, sometimes mistakenly called the direct descendant combinator.1That means the selector
div > p.some_class
only matches paragraphs of.some_class
that are nested directly inside adiv
, and not any paragraphs that are nested further within. This implies that every element matchingdiv > p.some_class
necessarily also matchesdiv 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:
Which elements are matched by which selectors?
Matched by both
div > p.some_class
anddiv p.some_class
This
p.some_class
is 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
This
p.some_class
is contained by ablockquote
within thediv
, rather than thediv
itself. Although thisp.some_class
is 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".