Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

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;
}

/* Les éléments <a> dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
  padding: 2px;
}

Syntaxe

[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 valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
[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).
[attr operateur valeur s]
Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Exemples

Liens

CSS

a {
  color: blue;
}

/* Liens internes commençant avec "#" */
a[href^="#"] {
  background-color: gold;
}

/* Liens avec "example" n'importe où dans l'URL */
a[href*="example"] {
  background-color: silver;
}

/* Liens avec "insensitive" n'importe où dans l'URL,
   quelle que soit la casse */
a[href*="insensitive" i] {
  color: cyan;
}

/* Liens avec "cAsE" n'importe où dans l'URL, 
   et avec cette casse donnée.*/ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* Liens qui finissent ".org" */
a[href$=".org"] {
  color: red;
}

HTML

<ul>
  <li><a href="#internal">Lien interne<a></li>
  <li><a href="http://example.com">Lien d'exemple</a></li>
  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
  <li><a href="http://example.org">Lien vers example.org</a></li>
</ul>

Résultat

Langues

CSS

/* Tous les éléments divs avec un attribut `lang` seront en gras. */
div[lang] {
  font-weight: bold;
}

/* Tous les divs en anglais américains seront bleus. */
div[lang~="en-us"] {
  color: blue;
}

/* Tous les divs en portugais seront verts. */
div[lang="pt"] {
  color: green;
}

/* Tous les divs en chinois seront rouges (chinois
   simplifié (zh-CN) ou traditionnel (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Tous les divs en chinois traditionnels pour l'attribut
   `data-lang` seront violet. */
/* Note : Les doubles quotes ne sont pas strictement nécessaires
   ici */ 
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">世界您好!</div>

Résultat

Listes ordonnées

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La spécification HTML indique que l'attribut type doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément <input>. Si on souhaite utiliser un sélecteur d'attribut avec type d'une liste ordonnée (<ol>), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

CSS

/* Les types de liste devront être utilisé avec le 
   marqueur pour la casse vu les spécifications HTML */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Liste d'exemple</li>
</ol>

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 sur iOSSamsung Internet
Attribute selector ([attr=value])Chrome 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
Case-sensitive modifier (s)
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi

Étiquettes et contributeurs liés au document

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