What is the greater than (>) selector in CSS?
What is the Greater Than (>) Selector in CSS?
In CSS, the “>” symbol is not used to compare two values like in other programming languages. Here, we use the greater than (>) symbol as a selector.
In CSS, selectors are used to select single or multiple HTML elements. Whenever we use the greater than symbol in a selector, it selects the immediate children of the parent element, but not deeply nested child elements.
Syntax
You can use the greater-than symbol in CSS selectors using the following syntax.
selecter1>selector2 {
/* CSS code */
}
In the above syntax, “selector1” is a parent element and “selector2” is a direct child element. Therefore, we define styles for the child elements in the declaration block.
Example 1
In the following example, we have created an ordered list of HTML elements. In the CSS, we used the “ol>li” selector, which selects all “li” elements that are direct children of the “ol” HTML element.
In the output, users can observe that all elements of the list have turned blue because all “li” elements are direct children of “ol” elements.
<html>
<head>
<style>
ol>li {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i>(>) CSS Selector in CSS</i> to Select Direct Child Elements</h3>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li>NodeJS</li>
</ol>
</body>
</html>
Example 2
In the following example, we have a “div” element containing “p” elements at different levels. Within the “div” element, we add an “h4” element and a “p” element. Thus, we add “p” elements at the second and third depth levels.
In the CSS, we use the “div>p” CSS selector to select all direct “p” elements of the div element. Furthermore, we use the “div p” CSS selector to select all “p” elements of the div element.
In the output, users can observe that “color: red” is only applied to the first “p” element because it is the only direct child of the div element. Across all levels, children selected from the “div p” CSS selector have “background-color: aqua” applied.
<html>
<head>
<style>
div>p {
color: red;
} div p {
background-color: aqua;
}
</style>
</head>
<body>
<h3>Using the <i>(>) CSS Selector in CSS</i> to Select Direct Child Elements</h3>
<div>
<p> This paragraph is at the first level. </p>
<h3>
<p> This paragraph is at the second level. </p>
<h4>
<p> This paragraph is at the third level. </p>
</h4>
</h3>
</div>
</body>
</html>
Example 3
In the following example, we use the greater-than symbol to select HTML elements from a deeply nested level. Here, the “container” HTML element contains an unordered list, and we also create an unordered list outside the “container” element.
In the CSS, we use the “.container > ul > li” CSS selector to select all direct children of the “li” element, where the “ul” element should be a direct child of an element with the “container” class name.
In the output, we can see that all CSS is applied to the nested list.
<html>
<head>
<style>
.container>ul>li {
color: red;
padding: 3px;
background-color: green;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>Use <i>(>)CSS selector</i> in CSS to select direct child elements</h3>
<div class = "container">
<ul>
<li> one </li>
<li> Two </li>
<li> Three </li>
</ul>
</div>
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li> </ul>
</body>
</html>
Users have learned to use the greater-than sign (>) CSS selector in CSS. It is used to select direct children of a specific element. Therefore, we can use CSS selectors with the greater-than sign (>) with HTML tags, class names, IDs, and other CSS selectors.