Combinateur CSS

Combinateur CSS

Le combinateur est un mécanisme qui explique la relation entre les sélecteurs.

Les sélecteurs CSS peuvent contenir plusieurs sélecteurs simples. Entre les sélecteurs simples, nous pouvons inclure un combinateur.

Il y a quatre types de combinateurs différents dans le CSS:

  • Sélecteur de descendant (espace)
  • Sélecteur d'enfant (>)
  • Sélecteur de frère voisin (+)
  • Sélecteur de frère universel (~)

Sélecteur de descendant

Le sélecteur de descendant correspond à tous les éléments descendants qui appartiennent à l'élément spécifié.

Dans l'exemple suivant, tous les éléments <p> à l'intérieur de l'élément <div> sont sélectionnés:

Exemple

div p {
  background-color: yellow;
}

Essayez-le vous-même

Sélecteur d'enfant

Le sélecteur d'enfant correspond à tous les éléments enfants qui appartiennent à l'élément spécifié.

Dans l'exemple suivant, tous les éléments <p> qui sont des éléments enfants de l'élément <div> sont sélectionnés:

Exemple

div > p {
  background-color: yellow;
}

Essayez-le vous-même

Sélecteur de frère voisin

Le sélecteur de frère voisin correspond à tous les éléments frères immédiatement après l'élément spécifié.

Les éléments frères (de même niveau) doivent avoir le même parent. 'Voisin' signifie 'immediatement après'.

Dans l'exemple suivant, tous les éléments <p> immédiatement suivants de l'élément <div> sont sélectionnés:

Exemple

div + p {
  background-color: yellow;
}

Essayez-le vous-même

Sélecteur de frère universel

Le sélecteur de frère universel correspond à tous les éléments frères qui appartiennent à l'élément spécifié.

Dans l'exemple suivant, tous les éléments <p> qui sont des éléments frères de l'élément <div> sont sélectionnés:

Exemple

div ~ p {
  background-color: yellow;
}

Essayez-le vous-même

Tous les sélecteurs de combinaison CSS

Sélecteur Exemple Description de l'exemple
element element div p Sélectionnez tous les éléments <p> à l'intérieur de l'élément <div>.
element>element div > p Sélectionnez tous les éléments <p> dont l'élément parent est un élément <div>.
element+element div + p Sélectionnez tous les éléments <p> immédiatement après un élément <div>.
element1~element2 p ~ ul Sélectionnez chaque élément <ul> ayant un élément <p> précédent.

Lecture supplémentaire

Livres de complément :Sélecteur descendant CSS

Livres de complément :Sélecteur enfant CSS

Livres de complément :Sélecteur frère adjacent CSS