CSS Descendant Combinator

The CSS descendant combinator selects elements that are descendants of another element. It is represented by whitespace between two selectors and can match children, grandchildren, and other elements nested at any depth within the first matched element.

Syntax

The descendant combinator is represented by one or more whitespace characters between two selectors:

ancestor descendant {
  property: value;
}

For example, the following selector matches every <p> element that is a descendant of an <article> element:

article p {
  color: #0088cc;
}

How the Descendant Combinator Works

The selector on the right must match an element located somewhere inside an element matched by the selector on the left. The matching element does not have to be a direct child.

.content p {
  color: #0088cc;
}

This selector matches <p> elements anywhere inside an element with the content class, even when other elements occur between them in the document structure.

Descendant Relationships

A descendant can be a child, grandchild, or an element nested even deeper within another element. For example:

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

The selector article p matches both paragraphs. The first paragraph is a direct child of the <article>, while the second is nested inside the <section>. Both are descendants of the <article>.

Descendant vs. Child Combinator

The descendant combinator and child combinator both describe relationships between elements, but they match different levels of nesting.

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

Use the descendant combinator when the exact nesting level does not matter. Use the child combinator when the element must be an immediate child of the first element.

Combining with Other Selectors

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

.content .highlight {
  color: #0088cc;
}
#navigation a {
  font-weight: 600;
}
article a[href$=".pdf"] {
  text-decoration: underline;
}

Multiple combinators can also be used within a more complex selector to describe several element relationships.

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

This selector matches <p> elements inside an element with the summary class when that element is inside an <article> that is itself inside <main>.

Specificity

The descendant 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`

Descendant Combinator Example

The following example uses .example p to select every paragraph that is a descendant of the element with the example class. Both the direct child paragraph and the more deeply nested paragraph are 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 descendant combinator is defined in the Selectors Level 4 specification.

CSS Descendant Combinator