W3cubDocs

/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 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

Browser compatibilityUpdate compatibility data on GitHub

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

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator