CSS Child Combinator (>) - Direct Child Selection

The Child Combinator (>)

The child combinator selects elements that are direct children of a specified parent. It does not match deeper descendants.

Syntax

parent > child {
  /* styles */
}

Descendant vs Child

<ul class="nav">
  <li>Item 1
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

/* Descendant — matches ALL li elements inside .nav */
.nav li { color: blue; }

/* Child — matches ONLY direct li children of .nav */
.nav > li { color: red; }

The nested <li> inside the inner <ul> is selected by .nav li (descendant) but NOT by .nav > li (child combinator).

Specificity

The child combinator itself has no specificity weight. The specificity comes from the selectors on either side:

/* Specificity: (0, 1, 1) — one class + one element */
.nav > li { }

Common Use Cases

1. Navigation menus — Style only top-level menu items without affecting dropdowns
2. Grid/Flex layouts — Apply layout properties only to direct children: .grid > *
3. Component scoping — Prevent styles from leaking into nested components
4. List styling — Target only the first level of a nested list

Performance

The child combinator is slightly more performant than the descendant combinator because the browser only needs to check one level of nesting rather than traversing the entire subtree.