CSS Descendant vs Child Combinator: What Is the Difference?

The primary difference between the CSS descendant combinator and the child combinator lies in the depth of elements they target within the Document Object Model (DOM). While the descendant combinator (represented by a space) selects all matching elements nested anywhere inside a parent, the child combinator (represented by >) strictly targets immediate direct children. Choosing the correct selector prevents unintended style leakage, improves CSS maintainability, and ensures predictable styling across complex component hierarchies.

The Descendant Combinator (Space)

The descendant combinator is written by placing a single space between two selectors (A B). It matches any element B that is nested inside element A, regardless of how many nesting levels exist between them.

/* Selects all <p> elements inside .container, no matter how deeply nested */
.container p {
  color: #2b6cb0;
}

If a paragraph sits inside an article, inside a section, inside .container, the descendant selector still applies. This makes it useful when applying global typography or broad layout styles across an entire wrapper component.

The Child Combinator (>)

The child combinator uses the greater-than symbol (A > B). It targets only the elements B that are immediate direct children of A, completely ignoring elements nested inside subsequent sub-elements.

/* Selects only <p> elements directly under .container */
.container > p {
  color: #2b6cb0;
}

If a paragraph is wrapped inside a <div> within .container, the rule above will skip it entirely.

Practical Comparison with HTML

Consider the following nested markup:

<div class="card">
  <p>Direct paragraph inside card.</p>
  <div class="card-body">
    <p>Nested paragraph inside card body.</p>
  </div>
</div>

• .card p: Applies styles to both paragraphs.
• .card > p: Applies styles only to "Direct paragraph inside card."

Summary of Key Differences

Using the direct child combinator (>) is best practice when constructing modular components where deeply nested child elements must manage their own styling independently.