Sélecteur PROXIMITE

Rôle

Le sélecteur de proximité désigné par le signe ~ permet de cibler les éléments qui suivent de loin ou de près un autre élément (donc pas avant)

 Note : les éléments suivant doivent être au même niveau hierarchique (pas à l’intérieur) que le suivi

Dans l’exemple ci-dessous, les deux paragraphes qui suivent le titre seront rouges

h1~p{
    color: red;
}

Code HTML

<p> Lorem ipsum dolor ..</p>
<h1> Titre </h1>
<p> Lorem ipsum dolor ..</p>
<p> Lorem ipsum dolor ..</p>

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

h1~p{
    color: red;
}

– Le code HTML

<p>Lorem ipsum dolor</p>
<h1>Titre</h1>
<p>Lorem ipsum dolor</p>
<h2>Sous-titre</h2>
<p>Lorem ipsum dolor</p>

Résultat

Dans cet exemple, le premier paragraphe après le titre h1 est rouge, mais aussi le deuxième paragraphe situé après le titre h2.

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur de proximité 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)
(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 adjacent)