Sélecteurs d'attribut

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

[attr]

Permet de cibler un élément qui possède un attribut attr.

[attr=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la valeur de cet attribut est exactement valeur.

[attr~=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la valeur de cet attribut une liste de mots séparés par des blancs dont un vaut exactement valeur.

[attr|=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la valeur de cet attribut est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.

[attr^=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la première valeur commence par valeur.

[attr$=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la dernière valeur termine par valeur.

[attr*=valeur]

Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence d'une chaîne de caractères qui contient valeur.

[attr operateur valeur i]

On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).

Exemples

CSS

/* Tous les spans qui ont un attribut "lang" 
   seront en gras. */
span[lang] {font-weight:bold;}
 
/* Tous les spans qui sont en portugais seront
   en vert */
span[lang="pt"] {color:green;}

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

/* Tous les spans en chinois seront en rouge, que
   ce soit du chinois simplifié (zh-CN) ou 
   traditionnel (zh-TW) */
span[lang|="zh"] {color: red;}

/* Tous les liens internes auront un fond doré */
a[href^="#"] {background-color: gold;}

/* Tous les spans dont la première classe commence par "main" 
   auront un fond jaune. */
/* Les spans avec la classe class="banner main" ne seront 
   pas affectés. */
span[class^="main"] {background-color: yellow;}

/* Tous les liens dont les URL terminent par ".cn" 
   seront rouges */
a[href$=".cn"] {color: red;}

/* Tous les liens dont l'url contient "example" 
   auront un fond gris */
a[href*="example"] {background-color: #CCCCCC;}

/* Tous les champs email auront une bordure bleue */
/* Toutes les capitalisations de email fonctionneront
   "email", "EMAIL", "eMaIL", etc. */
input[type="email" i] {border-color: blue;}

HTML

<div class="hello-example">
    <a href="https://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="https://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
    <a href="https://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好！</span>
</div>

Résultat

Spécifications

Compatibilité des navigateurs