Elements which are not the direct child of the specified parent is not selected.
Syntax:
element > element {
// CSS Property
}
<!DOCTYPE html>
<html>
<head>
<title>
CSS element > element Selector
</title>
<style>
ul > li {
color:white;
background: green;
}
</style>
</head>
<body>
<h2 style = "color:#eccb24;">
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>
<!DOCTYPE html>
<html>
<head>
<title>
CSS element > element Selector
</title>
<!-- style to set element > element selector -->
<style>
li > div {
color:white;
background: #ad0de7;
}
ul > li {
color: #ea0ca0;
}
</style>
</head>
<br>
<body>
<h2 style = "color:#f62e0b;">
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>