The CSS child combinator: match direct children with >

The child combinator, >, matches an immediate parent/child relationship. .group > p selects paragraphs directly inside .group; .group p also selects paragraphs nested farther below it.

See which paragraph matches

Only the first paragraph is a direct child of .group. The second is inside a nested div, so it does not receive the blue border.

<div class="group">
  <p>Direct child: blue border.</p>
  <div><p>Deeper descendant: no blue border.</p></div>
</div>

.group p {
  background: #eff6ff;
  padding: 0.75rem;
}
.group > p {
  border-inline-start: 4px solid #2563eb;
}

Scope a component boundary

A selector such as .menu > li can style top-level items without styling every item in a nested submenu. That is useful when the immediate structure is intentional. If a wrapper is later inserted, the direct-child rule stops matching, which is a useful reason to inspect the actual DOM rather than keep increasing selector weight.

Whitespace around > is optional; including it makes the relationship easier to read. It is not a JavaScript comparison operator in this context.

Precision is not specificity

The combinator narrows what matches but adds no specificity weight itself. The selector components on either side still contribute their normal weight. Replacing a descendant space with > therefore does not automatically win a competing cascade rule.

A selector such as div > h1 > p describes invalid nesting: a paragraph cannot be a child of a heading. Check the HTML structure before trying to fix its selector. Learn IDs and classes, cascade and specificity, and HTML wrappers.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.