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 exactementvaleur
. [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 exactementvaleur
. [attr|=valeur]
- Permet de cibler un élément qui possède un attribut
attr
et dont la valeur de cet attribut est exactementvaleur
ou dont la valeur commence parvaleur
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 parvaleur
. [attr$=valeur]
- Permet de cibler un élément qui possède un attribut
attr
et dont la dernière valeur termine parvaleur
. [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 contientvaleur
. [attr operateur valeur i]
- On peut ajouter un
i
(ouI
) 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
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de 'attribute selectors' dans cette spécification. |
Version de travail | Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse. |
Selectors Level 3 La définition de 'attribute selectors' dans cette spécification. |
Recommendation | |
CSS Level 2 (Revision 1) La définition de 'attribute selectors' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | (Oui) | 1.0 (1.7 ou moins) | 7 | 9 | 3 |
Modificateur pour l'insensibilité à la casse | 49.0 | 47.0 (47.0) | ? | ? | 9 |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Support simple | ? | (Oui) | 1.0 (1) | ? | ? | ? | (Oui) |
Modificateur pour l'insensibilité à la casse | ? | 49.0 | 47.0 (47.0) | ? | ? | 9 | 49.0 |