Sélecteurs d'attribut

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.

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.

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.

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 : Blocs de base en CSS
• Suivant