What are CSS combinators, and how do the descendant and child combinators differ?

Combinators are the symbols between two selectors that describe how the elements must be nested; a space means "anywhere inside", while > means "a direct child of".

Combinators let you select based on document structure — where an element sits relative to another — not just on its own tag or class.

Descendant combinator (a space):

nav a { color: white; }

This matches an <a> anywhere inside a <nav>, no matter how deeply nested.

Child combinator (>):

nav > a { color: white; }

This matches an <a> only if it is a direct child of <nav> — one level down, not buried inside another element.

The difference is visible here:

<nav>
    <a href="#">Direct child - matched by BOTH nav a and nav > a</a>
    <div>
        <a href="#">Nested one level deeper - matched ONLY by nav a</a>
    </div>
</nav>

The full family of structural combinators:

Go deeper:

• Selectors and combinators (MDN) — worked examples of the descendant, child, and sibling combinators side by side.