Skip to content
Related Articles

Related Articles

What is greater-than sign (>) selector in CSS?
  • Last Updated : 15 Feb, 2019

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 to set element > element selector -->
        <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:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :