Sélecteur ADJACENT
Rôle
Le sélecteur adjacent désigné par le signe + permet de cibler un élément qui suit immédiatement un autre élément
Note : l’élément suivant doit être au même niveau hierarchique (pas à l’intérieur) que le premier élément
Dans l’exemple ci-dessous, seul le premier paragraphe sera rouge.
h1+p{
color: red;
}
Code HTML
<h1> Titre </h1>
<p> enfant enfant enfant enfant ..</p>
<p> enfant enfant enfant enfant ..</p>
Testez vous-même ce sélecteur
Utilisez Codepen.
– Le code CSS
h1+p{
color: red;
}
– Le code HTML
<h1> Titre </h1> <p> Lorem ipsum dolor ..</p> <p> Lorem ipsum dolor..</p>
Résultat
Dans cet exemple, seul le paragraphe est rouge
Compatibilité
Le sélecteur adjacent est pris en charge par tous les principaux navigateurs
A voir aussi
#id (sélecteur id)
.class (sélecteur class)
#head p>em (sélecteur contextuel)
p (sélecteur balise)
p,h1 (sélecteur multiple)
* (sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1~p (sélecteur de proximité)
