Sélecteurs d'attribut

Résumé

Les sélecteurs d'attribut ciblent un élément en utilisant la présence d'un certain attribut ou de la valeur d'un attribut.

[attr]
Représente un élément avec un attribut nommé attr.
[attr=valeur]
Représente un élément avec un attribut nommé attr dont la valeur est exactement « valeur ».
[attr~=valeur]
Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par des espaces, dont l'un d'eux est exactement « valeur ».
[attr|=valeur]
Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par un tiret (-), dont l'un d'eux est exactement « valeur ». Il peut être utilisé pour cibler les codes de langue utilisant la sous-dénomination.
[attr^=valeur]
Représente un élément avec un attribut nommé attr dont la valeur est préfixée par « valeur ».
[attr$=valeur]
Représente un élément avec un attribut nommé attr dont la valeur est suffixée par « valeur ».
[attr*=valeur]
Représente un élément avec un attribut nommé attr dont la valeur contient au moins une occurence de « valeur » comme sous-chaîne.

Exemples

<style type="text/css">
    /* Tous les spans avec l'attribut « lang » sont en gras */
    span[lang] {font-weight:bold;}
 
    /* Tous les spans en portugais sont en vert */
    span[lang="pt"] {color:green;}

    /* Tous les spans en anglais américain sont en bleu */
    span[lang~="en-us"] {color: blue;}

    /* N'importe quel span en chinois est en rouge, cible le simplifié (zh-CN) ou le traditionnel (zh-TW) */
    span[lang|="zh"] {color: red;}

    /* Tous les liens internes ont une couleur de fond dorée */
    a[href^="#"] {background-color:gold}

    /* Tous les liens dont les urls termines en « .cn » sont en rouge */
    a[href$=".cn"] {color: red;}

    /* Tous les liens contenant « exemple » dans l'url ont un fond gris */
    a[href*="exemple"] {background-color: #CCCCCC;}
</style>

Utilisé avec le code HTML suivant :

<div class="bonjour-exemple">
    <a href="http://exemple.com">Anglais :</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="bonjour-exemple">
    <a href="#portugais">Portugais :</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="bonjour-exemple">
    <a href="http://exemple.cn">Chinois (simplifié) :</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="bonjour-exemple">
    <a href="http://exemple.cn">Chinois (traditionnel) :</a>
    <span lang="zh-TW">世界您好!</span>
</div>

Devrait donner le résultat suivant :

Anglais : Hello World!

Portugais : Olá Mundo!

Chinois (simplifié) : 世界您好!

Chinois (traditionnel) : 世界您好!

Spécifications

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui) 1.0 (1.7 ou moins) 7 9 3
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? 1.0 (1) ? ? ?

Références

Étiquettes et contributeurs liés au document

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