Descendant - Astuces CSS

Anonim

Un sélecteur descendant en CSS est n'importe quel sélecteur avec un espace blanc entre deux sélecteurs sans combinateur. Voici quelques exemples:

ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )

Prenons ul li ( )par exemple. Cela signifie «tout élément de liste descendant d'une liste non ordonnée».

Descendant signifie n'importe où imbriqué dans l'arborescence DOM. Cela pourrait être un enfant direct, pourrait avoir cinq niveaux de profondeur, c'est toujours un descendant. Ceci est différent d'un combinateur enfant (>) qui nécessite que l'élément soit le prochain niveau imbriqué vers le bas.

Pour illustrer, div span ( )correspondra:

 I will match
  • I will match too

Vous ne devriez probablement pas vous en préoccuper beaucoup, mais le sélecteur décédé est assez «cher» - c'est-à-dire difficile / lent pour les moteurs de rendu à comprendre et à utiliser. MDN:

Le sélecteur descendant est le sélecteur le plus cher en CSS. C'est terriblement cher, surtout si le sélecteur est dans la catégorie Tag ou Universal.

Mais seulement en comparaison avec d'autres sélecteurs. C'est toujours incroyablement rapide et vous ne le remarquerez probablement jamais à moins de devenir fou.

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Tout Tout Tout Tout Tout Tout Tout