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
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'descendant combinator' in that specification. |
Working Draft | |
Selectors Level 3 The definition of 'descendant combinator' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'descendant selectors' in that specification. |
Recommendation | |
CSS Level 1 The definition of 'contextual selectors' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Descendant combinator (A B ) | Chrome
Full support
1
| 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
| Chrome Android
Full support
18
| Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android
Full support
1.0
|
A >> B syntax | 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.