Sélecteurs CSS avancés

Sélection d’un élément enfant direct

#parent > .enfant

On sélectionne les éléments portant la classe enfant qui sont des enfant directs de l’élément portant l’identifiant parent.

Cas d’usage : plusieurs éléments emboîtés – par exemple des menus – mais on ne cherche qu’à sélectionner le premier niveau.

Sélection d’un élément adjacent (ou élément frère)

.abel + .cain

On sélectionne les éléments portant la classe cain qui succèdent à des éléments qui portent la classe abel.

Cas d’usage : chercher à sélectionner un élément qui est systématiquement après un autre, mais difficile à pointer efficacement par lui-même.

Sélection du n-ième élément (d’un parent direct implicite)

Pour sélectionner un élément par sa position au sein de son parent, vous pouvez utiliser :nth-child() (comprendre "énième enfant") avec, comme paramètre, la position de l’élément à sélectionner.

Exemple :

a:nth-child(2)

Sélectionne les liens qui sont, chacun, le deuxième enfant de leur parent direct.

Sélection d’un élément avec exclusion

Pour sélectionner un élément à condition qu’il ne corresponde pas à un autre sélecteur simple, vous pouvez utiliser :not() avec, comme paramètre, le sélecteur à exclure.

Exemple :

a:not(.exclure)

Sélectionne tous les liens qui ne portent pas la classe exclure.

D’autres sélecteurs

Il existe de nombreux sélecteur CSS et de nouveaux sélecteurs sont régulièrement ajoutés : nous vous conseillons la section « Pour approfondir » de la documentation MDN.

À SAVOIR
CSS ne permet pas encore de sélectionner un élément en fonction de son contenu textuel, ni de sélectionner un élément parent en fonction de ses enfants. Pour ces besoins, vous pouvez utiliser des sélecteurs XPATH.

Revenir au sommaire