Sélecteurs d'attribut

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.