Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).
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.
/* 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 */ }
Example
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 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
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome
Full support
Yes
| Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android
Full support
Yes
| Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
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 | Edge Mobile No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support 10 — 11.1 | 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.