CSS Child Combinator

The CSS child combinator selects elements that are direct children of another element. It is represented by the greater-than sign (>) between two selectors and does not match descendants nested more deeply within the first matched element.

Syntax

The child combinator uses the greater-than sign (>) between two selectors:

parent > child {
  property: value;
}

For example, the following selector matches <p> elements that are direct children of an <article> element:

article > p {
  color: #0088cc;
}

How the Child Combinator Works

The selector on the right must match an element whose parent matches the selector on the left. Elements nested at deeper levels are not selected.

.content > p {
  color: #0088cc;
}

This selector matches <p> elements whose immediate parent has the content class. A paragraph nested inside another element within .content does not match.

Direct Children

The child combinator is useful when the document structure matters and a rule should apply only to elements at the first level inside another element.

<article>
  <p>Direct child paragraph.</p>
  <section>
    <p>Nested paragraph.</p>
  </section>
</article>

The selector article > p matches the first paragraph because its parent is the <article>. It does not match the second paragraph because its parent is the <section>.

Child vs. Descendant Combinator

The child combinator and descendant combinator both describe relationships between elements, but the child combinator limits matching to one level of nesting.

Selector	Matches
`article > p`	Only `<p>` elements that are direct children of an `<article>`.
`article p`	Any `<p>` descendant of an `<article>`, regardless of nesting depth.

Use the child combinator when the matching element must have a specific parent. Use the descendant combinator when the exact nesting depth does not matter.

Combining with Other Selectors

The child combinator can connect type, class, ID, attribute, pseudo-class, and other selectors.

.navigation > a {
  color: #0088cc;
}
#content > .section {
  margin-bottom: 20px;
}
.downloads > a[href$=".pdf"] {
  font-weight: 600;
}

Child combinators can also be combined with other combinators to describe more detailed relationships in the document structure.

main > article .summary {
  color: #0088cc;
}

This selector requires the <article> to be a direct child of <main>, while the element with the summary class can be nested anywhere inside that article.

Specificity

The child combinator itself does not add any specificity. The specificity of the complete selector is determined by the selectors on either side of the combinator.

Selector	Specificity
`article > p`	`0-0-2`
`.content > p`	`0-1-1`
`.content > .highlight`	`0-2-0`
`#content > p`	`1-0-1`

Child Combinator Example

The following example uses .example > p to select paragraphs that are direct children of the element with the example class. The paragraph nested inside the <section> is not selected.

.example > p {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other combinators select elements according to different relationships within the document structure:

Specifications

The child combinator is defined in the Selectors Level 4 specification.

CSS Child Combinator