Sélecteurs de voisins généraux

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui correspond au second sélecteur et est précédé d'un autre élément correspondant au premier sélecteur tout en partageant un élément parent commun.

Syntaxe

element ~ element { style properties }

Exemples

CSS

p ~ span {
  color: red;
}

HTML

<span>Ici, ce n'est pas rouge.</span>
<p>Voici un paragraphe.</p>
<code>Un peu de code.</code>
<span>Et un autre span.</span>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de 'following-sibling combinator' dans cette spécification.
Version de travail  
Selectors Level 3
La définition de 'general sibling combinator' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 7 9 3
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB
 Dernière mise à jour par : SphinxKnight,