Summary
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 element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
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.
The abstract nature of this combinator makes it different from the other standardized combinators as these combinators are all represented by a distinct, finite character sequence. This inconsistency was addressed with the addition of a redundant descendant combinator represented by two greater‐than characters in sequence (>>
), giving it a form that is particularly similar to the child combinator, which shares a similar function.
Syntax
selector1 selector2 { /* property declarations */ }
selector1 >> selector2 { /* property declarations */ }
Example
li { list-style-type: disc; } li li { list-style-type: circle; }
<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>
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'descendant combinator' in that specification. |
Working Draft | Introduced >> as descendant combinator in addition to the whitespace as combinator. |
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
>> form |
No support | No support | No support | No support | No support | 10 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
>> form |
? | ? | ? | ? | ? | ? |