What is Greater-than Sign (>) Selector in CSS?

Last Updated : 11 Jul, 2025

In CSS, the greater than sign (>) is known as the child combinator selector. It is used to style elements that have a specific parent. Unlike other selectors, it only targets direct children of an element, meaning it only looks one level down in the HTML structure.

How the Child Combinator Selector Works

The child combinator is written as:

parent > child

This means it selects the child element that is directly inside the parent element. Any elements that are not direct to children, even if they are further down the structure, won’t be selected.

Syntax:

element > element {
    // CSS Property
}
In this code, the child-element will only be styled if it is a direct child of the parent-element.

This rule applies styles only to child elements that are direct children of the parent element.

Example 1

html

<html>
<head>
    <style>
        ul>li {
            color: white;
            background: green;
        }
    </style>
</head>
<body>
    <h2 style="color:green;"> CSS element &gt; 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

html

<html>
<head>
    <style>
        li>div {
            color: white;
            background: green;
        }
        ul>li {
            color: green;
        }
    </style>
</head>
<body>
    <h2 style="color:green;"> CSS element &gt; 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:

Why is the Child Combinator Selector Important?

Ensures precise control over which elements receive styles.
Prevents unintended styling of nested or deeply nested elements.
Helps maintain a clean and maintainable CSS codebase, especially in complex layouts.
Useful in component-based design or frameworks where structure depth varies.

Common Use Cases

Styling menu items where only direct links in navigation get specific styles.
Applying styles to first-level children without affecting nested lists or containers.
Avoiding style bleed in nested components or widgets.

Browser Support

The child combinator selector is supported across all modern browsers, including:

Browser	Version Supported
Google Chrome	1+
Mozilla Firefox	1+
Microsoft Edge	All versions
Internet Explorer	7+
Safari	3+
Opere	9+

Tips and Best Practices

Combine child combinators with class or attribute selectors for more specific targeting.
Use the child combinator to avoid deep descendant selectors (space combinator) that can cause unintended matches.
When debugging CSS, check the HTML structure carefully to confirm direct parent-child relationships.

Learn More About CSS

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.

CSS Introduction

kartikgoel1999

Improve

Article Tags :