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.

/* Les éléments <a> avec un attribut title */
a[title] {
  color: purple;
}

/* Les éléments <a> avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Les éléments <a> dont href contient "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] {
  font-style: italic;
}
[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 dont la valeur est exactement valeur.
[attr~=valeur]
Permet de cibler un élément qui possède un attribut attr dont la valeur est une liste de mots séparés par des espaces blancs, dont un vaut exactement valeur.
[attr|=valeur]
Permet de cibler un élément qui possède un attribut attr dont la valeur 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 dont la valeur commence par valeur.
[attr$=valeur]
Permet de cibler un élément qui possède un attribut attr dont la valeur se 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 de valeur dans la chaîne de caractères.
[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="http://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="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 7Opera Support complet 9Safari Support complet 3WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Case-insensitive modifier (i)Chrome Support complet 49Edge Aucun support NonFirefox Support complet 47IE Aucun support NonOpera Support complet 36Safari Support complet 9WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Aucun support NonFirefox Android Support complet 47Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

 

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : BenMorel, SphinxKnight, fuentesloic, teoli, tregagnon, FredB
Dernière mise à jour par : BenMorel,