Les combinateurs permettent d’agir sur un élément en fonction de sa relation avec un autre.
Nous connaissons déjà :
h1 em {
font-size:2em;
}
Qui ciblera tous les éléments "em" contenus dans l’élément "h1".
D’autres combinateurs plus avancés permettent de ne désigner que le premier enfant d’un élément, ne pointer que des éléments directement adjacents à un autre, …
Le sélecteur de frère adjacent (le signe « + » indique un sélecteur adjacent) permet de cibler un élément précédé par un autre élément qui possède le même parent.
Nous l'utilisons ici pour mettre en forme le premier paragraphe après un titre et éviter d’utiliser des classes superflues.
Comme le sélecteur d'enfant, celui-ci est pris en charge par Internet Explorer 7 et ses versions ultérieures s’il n’y a pas de commentaires entre les éléments ciblés.
Sélecteur CSS3 utilisant le caractère ~, il permet d'appliquer des styles d’un seul coup à tous les frères d’un élément ciblé répondant à un sélecteur précis.
Il est important de noter que ce sélecteur ne cible que les frères suivants d’un élément ciblé, en aucun cas les frères précédents ne seront concernés.
Ce paragraphe ne devra pas être concerné par le sélecteur de frère adjacent indirect
Enfin supporté par nos navigateurs !