Sélecteurs d'attribut
=====================

* Précédent
* Aperçu : Building blocks
* Suivant

Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

|  |  |
| --- | --- |
| Prérequis : | 
 Maîtrise élémentaire de l'informatique,
 suite logicielle de base installée, compétences élémentaires pour
 travailler avec des fichiers, connaissance de base du HTML (cf.
 Introduction à HTML), et une idée de
 Comment fonctionne CSS.
  |
| Objectif : | Découvrir les sélecteurs d'attribut et comment les utiliser. |

Sélecteur de présence et de valeur
----------------------------------

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple `href`), ou sur des correspondances variées avec la valeur d'un attribut donné

| Sélecteur | Exemple | Description |
| --- | --- | --- |
| `[*attr*]` | `a[title]` | 
 Cible les éléments avec un attribut du nom de *attr* — la valeur
 entre les crochets droits.
  |
| `[*attr*=*value*]` | `a[href="https://example.com"]` | 
 Cible les éléments dont l'attribut *attr* a la valeur
 *value* — la chaîne entre guillemets.
  |
| `[*attr*~=*value*]` | `p[class~="special"]` | 
 Cible les éléments avec un attribut *attr* dont la valeur est
 exactement *value*, ou les éléments dont l'attribut
 *attr* contient une ou plusieurs valeurs, dont au moins une
 correspond à *value*.


 Notez que dans une liste de plusieurs valeurs, le séparateur est
 l'espace.
  |
| `[*attr*|=*value*]` | `div[lang|="zh"]` | 
 Cible les éléments avec un attribut *attr* dont la valeur peut
 être exactement *value* ou peut commencer par
 *value* immédiatement suivie d'un trait d'union.
  |

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

* Avec `li[class]` on cible tout élément `<li>` possédant un attribut `class`. On cible ainsi tous les éléments de la liste sauf le premier.
* `li[class="a"]` cible les `<li>` appartenant à la classe `a` et seulement elle. Un élément `<li>` dans la classe `a` mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.
* `li[class~="a"]` cible tout élément `<li>` dont l'attribut `class` contient `a` dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.

Sélecteurs ciblant une sous-chaîne
----------------------------------

Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes `box-warning` et `box-error`, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut `[class ^= "box-"]` est là pour ça.

| Sélecteur | Exemple | Description |
| --- | --- | --- |
| `[attr^=value]` | `li[class^="box-"]` | élément sélectionné quand la valeur *value* de l'attribut *attr* commence par la sous-chaîne *value.* |
| `[attr$=value]` | `li[class$="-box"]` | élément sélectionné quand la valeur de l'attribut *attr* finit par la sous-chaîne *value.* |
| `[attr*=value ]` | `li[class*="box"]` | élément sélectionné quand la la sous-chaîne *value* apparaît quelque part dans la valeur de l'attribut *attr.* |

L'exemple suivant montre ces sélecteurs en action :

* `li[class^="a"]` correspond à toute valeur d'attribut commençant par un *a,* ce sélecteur cible donc les deux premiers items de la liste.
* `li[class$="a"]` correspond à toute valeur d'attribut finissant par un *a,* ce sélecteur cible donc les items un et trois de la liste.
* `li[class*="a"]` correspond à toute valeur d'attribut contenant quelque part un *a,* ce sélecteur cible donc tous les items de la liste.

Sensibilité à la casse
----------------------

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur `i` avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (*a* = *A*). Sans le drapeau `i`, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.

Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un `a` — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau *insensible à la casse,* il cible donc tous les éléments de la liste.

**Note :** Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

Pas suivants
------------

Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux sélecteurs de pseudo-classes et pseudo-éléments.

* Précédent
* Aperçu : Building blocks
* Suivant