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.


```css
/\* 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]` 
Expérimental

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

Error: could not find syntax for this itemExemples
--------

### Liens

#### CSS


```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


```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


```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


```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

**Expérimental:** **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


```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


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


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `attr()`
* Sélectionner un élément : `Document.querySelector()`, `DocumentFragment.querySelector()` ou `Element.querySelector()`
* Sélectionner l'ensemble des éléments correspondants : `Document.querySelectorAll()`, `DocumentFragment.querySelectorAll()` ou `Element.querySelectorAll()`
* Ces méthodes sont implémentées sur le *mixin* `ParentNode`, voir `ParentNode.querySelector()` et `ParentNode.querySelectorAll()`