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 qui débute par une valeur.

 Note : la valeur doit obligatoirement être suivie d’un espace ( ) ou d’un tiret (-)

Dans cet exemple, tous les paragraphes avec la valeur de class qui commence par ‘bg’ auront un fond orange.

p[class|="bg"]{
    background-color: orange;
}

<h1>Titre</h1>
<p class="bg-paire">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="bg-impair">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="bg-paire">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="color-rouge">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

Testez vous-même ce sélecteur

Compatibilité

Le sélecteur d’attribut debut 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]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)