CSS Sélecteurs de combinaison

Combinateurs CSS

Note Les combinateurs décrivent la relation entre deux sélecteurs.

Les combinateurs CSS incluent diverses façons de combiner des sélecteurs simples.

En CSS3, il existe quatre méthodes de combinaison :

  • Sélecteur descendant (espace) séparé)
  • Sélecteur enfant (signe supérieur)>séparé par un signe)
  • Sélecteur de frère adjacent (signe plus)+séparé)
  • Sélecteur de frère général (tilde)～séparé)

Sélecteur descendant

Le sélecteur descendant est utilisé pour sélectionner les éléments descendants d'un élément.

L'exemple suivant sélectionne tous les éléments <p> à l'intérieur des éléments <div> :

Exemple

div p { background-color:yellow; }

Essayez-le vous-même »

Sélecteur d'élément enfant

Par rapport au sélecteur descendant, le sélecteur enfant (sélecteurs enfants) ne peut sélectionner que les éléments qui sont des enfants directs/de premier niveau d'un élément.

L'exemple suivant sélectionne tous les éléments <p> enfants directs de l'élément <div> :

Exemple

div>p { background-color:yellow; }

Essayez-le vous-même »

Sélecteur de frère adjacent

Le sélecteur de frère adjacent peut sélectionner un élément immédiatement après un autre élément, et les deux ont le même parent.

Si vous devez sélectionner un élément immédiatement après un autre élément, et que les deux ont le même parent, vous pouvez utiliser le sélecteur de frère adjacent.

L'exemple suivant sélectionne le premier élément <p> après tous les éléments <div> :

Exemple

div+p { background-color:yellow; }

Essayez-le vous-même »

Sélecteur de frère suivant

Le sélecteur de frère suivant sélectionne tous les éléments frères qui suivent l'élément spécifié.

L'exemple suivant sélectionne tous les éléments <p> frères adjacents après tous les éléments <div> :

Exemple

div~p { background-color:yellow; }

Essayez-le vous-même »
autres extensions