What is greater-than sign (>) selector in CSS?

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


Output:

Example 2: This example describes the greater than > selector.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.