Un combinateur CSS, c'est un symbole qui sert de connecteur logique entre deux éléments. Au lieu de dire au navigateur 'Cherche tous les paragraphes', on lui donne un itinéraire précis : 'Cherche uniquement les paragraphes qui ont une relation spécifique avec cette boîte (parent, enfant ou voisin)
Le combinator descendant sélectionne tous les éléments à l'intérieur
d'un autre élément, quel que soit leur niveau. Ici, tous les paragraphes
p dans un div sont ciblés, même s'ils sont
dans un autre conteneur.
div p {
border: 2px solid yellow;
}
Le combinator enfant direct ne sélectionne que les éléments directement à l'intérieur d'un autre élément, sans inclure ceux plus profondément imbriqués.
div > p {
border: 2px solid yellow;
}
Le combinator adjacent sélectionne un élément qui vient immédiatement après un autre élément. Seul le premier élément suivant est affecté.
h3 + p {
border: 2px solid yellow;
}
Le combinator frères généraux sélectionne tous les éléments qui sont au même niveau et viennent après un autre élément. Tous les frères suivants sont affectés.
h3 ~ p {
border: 2px solid yellow;
}