Sélecteur [ATTRIBUT ~= valeur]

Rôle

Le sélecteur d’ attribut désigné par la syntaxe [attribut~=valeur] permet de cibler les éléments avec une valeur d’attribut contenant un mot

 Note : il s’agit ici d’une valeur bien spécifique contenu dans l’attribut, peu importe l’endroit (début, milieu, fin..). Cette valeur doit être séparé du reste par un espace ou deux (avant ou après selon sa position)

Dans cet exemple, le lien qui contient dans sa valeur d’attribut title le mot ‘google’ sera orange.

a[title~=google]{
    color: orange;
}

<a href="#" title="visitez le moteur yahoo">vers yahoo</a>
<a href="#" title="visitez le moteur google">vers google</a>

Testez vous-même ce sélecteur

Utilisez Codepen.

Compatibilité

Le sélecteur d’attribut contenant valeur 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 adjacent)