El combinador descendent - en general representat per un únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.
/* Llista els elemenst que són descendsnts de la llista "my-things" */
ul.my-things li {
margin: 2em;
}
El combinador descendent és tècnicament un o més caràcters d'espais en blanc CSS - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.
La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que (>>
), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.
Sintaxi
selector1 selector2 { /* property declarations */ }
selector1 >> selector2 { /* property declarations */ }
Exemple
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>
Resultat
Especificació | Estat | Comentari |
---|---|---|
Selectors Level 4 The definition of 'descendant combinator' in that specification. |
Working Draft | >> introduït com combinador descendent a més de l'espai en blanc com combinador. |
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 | Definició inicial |
Navegadors compatibles
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Tipus >> |
No support | No support | No support | No support | No support | 10 |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Tipus >> |
? | ? | ? | ? | ? | ? |