Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 30 Jul, 2021
Improve Article
Save Article

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:

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!