CSS Descendant vs Child Combinator - Space vs >

Descendant (Space) vs Child (>) Combinator

These two combinators both select nested elements, but they differ in depth of matching. Understanding this distinction is fundamental to writing precise CSS selectors.

Descendant Combinator (Space)

Matches elements at any nesting depth:

/* Matches ALL p elements inside .article, at any depth */
.article p {
  line-height: 1.6;
}

<div class="article">
  <p>Direct child — MATCHED</p>
  <div>
    <p>Grandchild — MATCHED</p>
    <section>
      <p>Great-grandchild — MATCHED</p>
    </section>
  </div>
</div>

Child Combinator (>)

Matches only direct children:

/* Matches ONLY direct p children of .article */
.article > p {
  line-height: 1.6;
}

<div class="article">
  <p>Direct child — MATCHED</p>
  <div>
    <p>Grandchild — NOT matched</p>
  </div>
</div>

When to Use Each

Scenario	Combinator	Reason
Style all text in article	Descendant	Need to reach nested elements
Top-level nav items only	Child	Avoid styling dropdown items
Flex/Grid direct children	Child	Layout only affects direct children
Global typography	Descendant	Need to style deeply nested content
Component scoping	Child	Prevent style leaking

Performance

The child combinator is slightly faster because the browser only checks one level of nesting. However, the difference is negligible in practice — choose based on correctness, not performance.

Common Mistake

/* Intended: style only top-level nav links */
.nav a { color: blue; }       /* Wrong — styles ALL links in .nav */
.nav > a { color: blue; }     /* Correct — only direct child links */
.nav > li > a { color: blue; } /* Even better — match the actual structure */