Web/CSS/Descendant combinator

The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

The descendant combinator is technically one or more [[../../../Glossary/CSS|CSS]] white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.

Syntax

selector1 selector2 {
  /* property declarations */
}

Examples

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

Result

Specifications

Specification	Status	Comment
Selectors Level 4The definition of 'descendant combinator' in that specification.	Working Draft
Selectors Level 3The definition of 'descendant combinator' in that specification.	Recommendation
CSS Level 2 (Revision 1)The definition of 'descendant selectors' in that specification.	Recommendation
CSS Level 1The definition of 'contextual selectors' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Descendant combinator (`A B`)	Chrome Full support 1 Full support 1 Full support 61 Notes' Notes' `>>>` is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.	Edge Full support 12	Firefox Full support 1	IE Full support 3	Opera Full support 3.5	Safari Full support 1	WebView Android Full support ≤37 Full support ≤37 Full support 61 Notes' Notes' `>>>` is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.	Chrome Android Full support 18 Full support 18 Full support 61 Notes' Notes' `>>>` is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0 Full support 1.0 Full support 8.0 Notes' Notes' `>>>` is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
`A >> B` syntax Deprecated'	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support 10 — 11.1	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support 10 — 11.3	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.