Descendant Selectors

CSS Descendant Selectors

A CSS descendant selector selects elements that are nested anywhere inside another matching element. It is written by placing a space between two selectors and is useful when a style should apply only within a particular section or container.

Descendant Selector Syntax

A descendant selector is created by writing one selector followed by a space and another selector. The first selector identifies an ancestor, while the second identifies the descendant elements to select.

article p {
  color: blue;
}

The selector article p selects <p> elements that are descendants of an <article> element. Paragraphs outside the <article> do not match this selector.

Selecting Descendant Elements

A descendant selector allows the same type of HTML element to have different styles depending on where it appears in the document.

article p {
  color: blue;
}

<article>
  <p>This paragraph is inside the article.</p>
</article>

<p>This paragraph is outside the article.</p>

Only the paragraph inside the <article> matches article p.

Different Levels of Nesting

A descendant does not have to be a direct child of the element identified by the first selector. It can be nested one or more levels deeper.

section p {
  color: green;
}

<section>
  <p>This paragraph is a direct child of the section.</p>
  <div>
    <p>This paragraph is nested inside the div.</p>
  </div>
</section>

Both paragraphs are descendants of the <section>, so both match the section p selector even though the second paragraph is nested inside a <div>.

Using Classes with Descendant Selectors

Descendant selectors can use classes as well as element selectors. This is useful for applying styles only to elements inside a particular component or section of a page.

.notice p {
  color: red;
}

<div class="notice">
  <h2>Important Notice</h2>
  <p>This paragraph is red.</p>
</div>

<p>This paragraph is not red.</p>

The selector .notice p selects paragraphs that are descendants of an element with the notice class. It does not select every paragraph on the page.

Using Multiple Descendant Selectors

A selector can describe more than one level of descendant relationship. Each space indicates that the selector to its right must appear somewhere inside an element matching the selector to its left.

article .notice strong {
  color: red;
}

<article>
  <div class="notice">
    <p>Please read the <strong>important information</strong>.</p>
  </div>
</article>

The selector matches <strong> elements inside an element with the notice class when that element is itself inside an <article>.

Long selector chains can become harder to understand and maintain, so use only as much nesting as is needed to identify the elements you intend to style.

The Space is Important

A space has a specific meaning between CSS selectors. It describes a descendant relationship and should not be confused with selectors written directly together or selectors separated by commas.

.notice p {
  color: blue;
}

The selector .notice p selects paragraphs that are descendants of an element with the notice class.

p.notice {
  color: blue;
}

The selector p.notice has no space and selects a <p> element that itself has the notice class.

.notice, p {
  color: blue;
}

The comma creates a selector list. This selects elements with the notice class and <p> elements independently.

Descendant vs Child Selectors

A descendant selector can match elements at any nesting level inside the ancestor. A child selector is more restrictive and matches only elements that are direct children of another element.

/* Descendant selector */
section p {
  color: blue;
}

/* Child selector */
section > p {
  color: red;
}

The descendant selector section p can match paragraphs nested anywhere inside a <section>. The child selector section > p matches only paragraphs whose parent is directly the <section>.

The next tutorial looks more closely at child selectors and how the > combinator changes which elements are selected.

When to Use Descendant Selectors

Descendant selectors are useful when styles should depend on where an element appears. For example, paragraphs inside an article, links inside navigation, or list items inside a particular menu can be styled without adding a separate class to every individual element.

nav a {
  text-decoration: none;
}

article p {
  line-height: 1.6;
}

.notice strong {
  color: red;
}

Keep descendant selectors as simple as possible. Very long chains that depend on many levels of HTML nesting can make styles more difficult to understand and may need to be changed when the document structure changes.

Summary

A CSS descendant selector uses a space between selectors to select elements nested inside another matching element. The descendant can be a direct child or can appear several levels deeper within the ancestor.

Descendant selectors are useful for applying styles according to an element's location in the HTML structure. When only direct children should match, a child selector provides a more specific relationship.