Child Selectors

The child selector (also called the child combinator) uses the > symbol to target only direct children of an element — not grandchildren or deeper.

Syntax

/* Only direct <li> children of <ul> */
ul > li {
    border-bottom: 1px solid #eee;
}

/* Only direct <p> children of .card */
.card > p {
    margin-bottom: 0.5rem;
}

Child vs Descendant

<div class="wrapper">
    <p>Direct child — matched by .wrapper > p</p>
    <div>
        <p>Grandchild — NOT matched by .wrapper > p</p>
    </div>
</div>

/* Descendant selector — matches BOTH paragraphs */
.wrapper p { color: blue; }

/* Child selector — matches ONLY the first paragraph */
.wrapper > p { color: red; }

When to Use Child Selectors

• When you only want to style the immediate children
• Prevents unintended styling of deeply nested elements
• Useful for navigation menus with nested submenus

/* Style only top-level nav items, not submenu items */
.nav > li {
    display: inline-block;
    padding: 0.5rem 1rem;
}