Combinateurs CSS
Combinateurs CSS
Un combinateur est quelque chose qui explique la relation entre les sélecteurs.
Un sélecteur CSS peut contenir plusieurs sélecteurs simples. Entre les sélecteurs simples, on peut inclure un combinateur.
Il existe quatre combinateurs différents en CSS :
- sélecteur descendant (espace)
- sélecteur enfant (>)
- sélecteur frère adjacent (+)
- sélecteur général frère (~)
Sélecteur descendant
Le sélecteur descendant correspond à tous les éléments descendants 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;
}
Sélecteur enfant (>)
Le sélecteur d'enfant sélectionne tous les éléments qui sont les enfants d'un élément spécifié.
L'exemple suivant sélectionne tous les éléments <p> qui sont des enfants d'un élément <div> :
Exemple
div > p {
background-color: yellow;
}
Sélecteur de frères et sœurs adjacents (+)
Le sélecteur de frère adjacent est utilisé pour sélectionner un élément qui se trouve directement après un autre élément spécifique.
Les éléments frères doivent avoir le même élément parent, et "adjacent" signifie "immédiatement après".
L'exemple suivant sélectionne le premier élément <p> placé immédiatement après les éléments <div> :
Exemple
div + p {
background-color: yellow;
}
Sélecteur général de frères et sœurs (~)
Le sélecteur de frère général sélectionne tous les éléments qui sont les prochains frères d'un élément spécifié.
L'exemple suivant sélectionne tous les éléments <p> qui sont les frères et sœurs suivants des éléments <div> :
Exemple
div ~ p {
background-color: yellow;
}
Tous les sélecteurs CSS Combinator
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |