The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.
Syntax:
element > element {
// CSS Property
}Example-1: This example describes the greater than > selector.
<!DOCTYPE html>
<html>
<head>
<title>
CSS element > element Selector
</title>
<style>
ul > li {
color:white;
background: green;
}
</style>
</head>
<body>
<h2 style = "color:green;">
CSS element > element Selector
</h2>
<div>Searching algorithms</div>
<ul>
<li>Binary search</li>
<li>Linear search</li>
</ul>
<p>Sorting Algorithms</p>
<ul>
<li>Merge sort</li>
<li>Quick sort</li>
</ul>
</body>
</html>
|
Output:
Example 2: This example describes the greater than > selector.
<!DOCTYPE html>
<html>
<head>
<title>
CSS element > element Selector
</title>
<style>
li > div {
color:white;
background: green;
}
ul > li {
color: green;
}
</style>
</head>
<body>
<h2 style = "color:green;">
CSS element > element Selector
</h2>
<ul>
<li>
<div>Searching algorithms</div>
<ul>
<li>Binary search</li>
<li>Linear search</li>
</ul>
</li>
<li>
<div>Sorting Algorithms</div>
<ul>
<li>Merge sort</li>
<li>Quick sort</li>
</ul>
</li>
</ul>
</body>
</html>
|
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.