CSS Combinators
Combinators CSS
Un combinator définit la relation entre deux sélecteurs ou plus.
Un sélecteur CSS peut contenir plusieurs sélecteurs. Entre ces sélecteurs, nous pouvons inclure un combinator pour créer une sélection plus spécifique.
Il existe quatre combinators différents en CSS :
- Combinator descendant (espace)
- Combinator enfant (>)
- Combinator de frère suivant (+)
- Combinator de frère suivant (~)
Combinator Descendant (espace)
Le combinator descendant correspond à tous les éléments qui sont des descendants (enfants, petits-enfants, etc.) d'un élément spécifié.
L'exemple suivant sélectionne tous les éléments <p> à l'intérieur des éléments <div> :
Exemple
div p {
background-color: yellow;
} Combinator Enfant (>)
Le combinator enfant sélectionne tous les éléments qui sont des enfants directs d'un élément spécifié.
L'exemple suivant sélectionne tous les éléments <p> qui sont des enfants directs de <div> :
Exemple
div > p {
background-color: yellow;
} Combinator de Frère Suivant (+)
Le combinator de frère suivant est utilisé pour sélectionner un élément qui suit directement un élément spécifique.
Les éléments frères doivent avoir le même parent.
L'exemple suivant sélectionne le premier élément <p> qui suit immédiatement un <div> et partage le même parent :
Exemple
div + p {
background-color: yellow;
} Combinator de Frère Suivant (~)
Le combinator de frère suivant sélectionne tous les éléments qui sont des frères suivants d'un élément spécifié.
L'exemple suivant sélectionne tous les éléments <p> qui sont des frères suivants de <div> et partagent le même parent :
Exemple
div ~ p {
background-color: yellow;
} Référence des Combinators CSS
Pour une liste complète de tous les combinators CSS, visitez notre Référence des Combinators CSS .