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) |