Um seletor descendente em CSS é qualquer seletor com espaço em branco entre dois seletores sem um combinador. Aqui estão alguns exemplos:
ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )Veja, ul li ( )por exemplo. Significa “qualquer item da lista que seja descendente de uma lista não ordenada”.
Descendente significa qualquer lugar aninhado dentro dele na árvore DOM. Pode ser uma criança direta, pode ter cinco níveis de profundidade, ainda é um descendente. Isso é diferente de um combinador filho (>), que exige que o elemento seja o próximo nível aninhado abaixo.
Para ilustrar, div span ( )corresponderá a:
I will match
- I will match too
Você provavelmente não deve se preocupar muito com isso, mas o seletor decedent é muito “caro” - o que significa difícil / lento para os motores de renderização descobrirem e fazerem as coisas com ele. MDN:
O seletor descendente é o seletor mais caro em CSS. É terrivelmente caro, especialmente se o seletor estiver na tag ou na categoria universal.
Mas apenas em comparação com outros seletores. Ainda é extremamente rápido e você provavelmente nunca notará, a menos que fique louco.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum |