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>