CSS Child Selector

The CSS Child Selector selects elements that are direct children of a specified parent element. It uses the greater-than symbol (>) between two selectors.

Unlike the CSS Descendant Selector, which selects elements at any nesting level, the child selector targets only elements one level below the specified parent.

CSS Child Selector Syntax

The syntax for a child selector is:

parent > child {
    property: value;
}

The parent selector identifies the containing element, while the child selector identifies the direct children to style.

CSS Child Selector Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Child Selector</title>
    <style>
        div > p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph is blue.</p>

        <section>
            <p>This paragraph is not blue.</p>
        </section>
    </div>
</body>
</html>

In this example, div > p selects the paragraph directly inside the <div>. The paragraph inside the <section> is not selected because it is not a direct child of the <div>.

Using the Child Selector with Classes

You can combine the child selector with a class to target specific elements.

<div class="content">
    <p>Direct child paragraph.</p>

    <section>
        <p>Nested paragraph.</p>
    </section>
</div>

.content > p {
    color: green;
    font-weight: bold;
}

Only the direct paragraph inside .content receives the green text and bold formatting.

Learn more about CSS Class Selectors and CSS Selectors.

Child Selector vs. Descendant Selector

Feature	Child Selector	Descendant Selector
Symbol	>	Space
Selects	Direct children only	Descendants at any depth
Example	div > p	div p

For example, div > p selects only paragraphs directly inside a <div>, while div p also selects paragraphs nested inside other elements within that <div>.

When to Use CSS Child Selectors

The child selector is useful when you need precise control over an HTML structure. You can use it to style direct navigation items, immediate content sections, or specific elements inside a container without automatically styling deeper nested elements.