Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is greater-than sign (>) selector in CSS?
In CSS, the ‘>’ sign is not used to compare two values like in other programming languages. Here, we use the greater than sign (>) as a selector.
In CSS, selectors are used to selecting single or multiple HTML elements. Whenever we use the greater than sign in the selector, it selects the direct children of the parent element but not that are nested at deep.
Syntax
Users can follow the syntax below to use the greater than sign in the CSS selector.
selecter1>selector2 {
/* CSS code */
}
In the above syntax, ‘selector1’ is a parent element, and ‘selector2’ is a direct child element. So, we define styles for the child element in the declaration block.
Example 1
In the example below, we have created the ordered list of the HTML element. In CSS, we have used the ‘ol>li’ selector, which represents the select all ‘li’ elements that are a direct child of the ‘ol’ HTML element.
In the output, users can observe that all elements of the list became blue as all ‘li’ are a direct child of ‘ol’.
<html>
<head>
<style>
ol>li {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> NodeJS </li>
</ol>
</body>
</html>
Example 2
In the example below, we have a div element containing the ‘p’ element at a different level. In the div element, we have added the ‘ht4’ elements and the ‘p’ element. So, we have added the ‘p’ element at the second and third levels deep.
In CSS, we have used the ‘div>p’ CSS selector to select all direct ‘p’ elements of the div element. Also, we have used the ‘div p’ CSS selector, which selects all ‘p’ elements of the div element.
In the output, users can observe that ‘color: red’ is applied to only the first ‘p’ element as it is the only direct child of the div element. The ‘background-color: aqua’ is applied to all ‘p’ elements as the ‘div p’ CSS selector selects children from all levels.
<html>
<head>
<style>
div>p {
color: red;
}
div p {
background-color: aqua;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</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 example below, we have used the greater than sign to select HTML elements from deeply nested levels. Here, the ‘container’ HTML element contains the unordered list, and also we have created the unordered list outside the ‘container’ element.
In CSS, we have used the ‘.container>ul>li’ CSS selector to select all ‘li’ elements that are direct children of the ‘ul’ element, and here ‘ul’ element should be the direct child of the element which has ‘container’ class name.
In the output, we can see that all CSS is applied to only nested lists.
<html>
<head>
<style>
.container>ul>li {
color: red;
padding: 3px;
background-color: green;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</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 learned to use the greater than sign (>) CSS selector in CSS. It is used to select the direct children elements of the particular element. Here, we can use the HTML tag, class names, IDs, etc. CSS selectors with the greater than sign (>).
2K+ Views
To Continue Learning Please Login