What IsThe Greater Than Sign( > ) Selector In Css

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

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.

Greater Than Sign( > ) Selector

 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:#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>
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: #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>

Related Post