Sélecteurs d'attribut

Ces sélecteurs permettent de cibler un élément selon la simple présence d'un attribut (par exemple href), ou selon certains critères sur la valeur de l'attribut.

Sélecteur	Exemple	Description
[attr]	a[title]	Cible les éléments avec un attribut attr (le nom de l'attribut est indiqué entre crochets).
[attr=valeur]	a[href="https://example.com"]	Cible les éléments avec un attribut attr qui vaut exactement valeur. La valeur attendue est alors indiquée entre doubles quotes.
[attr~=valeur]	p[class~="special"]	Cible les éléments avec un attribut attr qui vaut exactement valeur, ou qui contient valeur dans sa liste de valeurs (séparées par des espaces).
[attr|=valeur]	div[lang|="zh"]	Cible les éléments avec un attribut attr qui vaut exactement valeur, ou qui commence par valeur suivie immédiatement d'un tiret.

Voyons un cas d'usage de ces sélecteurs avec un exemple.

• En utilisant li[class], on peut cibler tout élément de liste avec un attribut class. Dans notre exemple ci-après, cela correspond à tous les éléments de liste, à l'exception du premier.
• li[class="a"] cible ceux qui ont une classe a, mais pas les éléments dont la classe contient a parmi une liste de valeurs. Dans notre exemple, ce sélecteur cible le deuxième élément de la liste.
• li[class~="a"] cible les éléments de liste avec une classe qui vaut a et ceux dont la classe contient a parmi la liste des valeurs. Dans notre exemple, le deuxième et le troisième élément sont ciblés.

Les sélecteurs suivant permettent de cibler un élément en fonction de la valeur de l'attribut et d'une sous-chaîne donnée. Par exemple, si on utilise deux classes box-warning et box-error et qu'on souhaite cibler tous les éléments avec une classe commençant par box-, on pourra utiliser [class^="box-"] afin de cibler les deux (ou [class|="box"] comme décrite ci-dessus).

Sélecteur	Exemple	Description
[attr^=valeur]	li[class^="box-"]	Cible les éléments où la valeur de l'attribut attr commence par valeur.
[attr$=valeur]	li[class$="-box"]	Cible les éléments où la valeur de l'attribut attr finit par valeur.
[attr*=valeur]	li[class*="box"]	Cible les éléments où la valeur de l'attribut attr contient valeur au sein de la chaîne.

Dans l'exemple qui suit, on illustre ces sélecteurs :

• li[class^="a"] cible tout élément de liste avec un attribut class dont la valeur commence par a. Dans notre exemple, cela correspond aux deux premiers éléments de la liste.
• li[class$="a"] cible tout élément de liste avec un attribut class dont la valeur finit par a. Dans notre exemple, cela correspond au premier et troisième éléments de la liste.
• li[class*="a"] cible tout élément de liste avec un attribut class contient a, n'importe où dans la valeur. Dans notre exemple, cela correspond à tous les éléments de la liste.

Si on souhaite cibler les éléments sans tenir compte de la casse pour les valeurs de l'attribut, on pourra utiliser le marqueur i avant le crochet fermant. Ce marqueur indique au navigateur de ne pas tenir compte de la casse (c'est-à-dire majuscule/minuscule). Sans ce marqueur, les correspondances seront considérées selon la sensibilité à la casse propre au langage du document ; pour le langage HTML, la casse est importante.

Dans l'exemple qui suit, le premier sélecteur cible l'élément dont la valeur de la classe commence par a. Dans l'exemple cela correspond au premier élément, car la valeur des deux suivants commence par un A majuscules. Le deuxième sélecteur utilise le marqueur i pour ne pas tenir compte de la casse, et permet dans l'exemple de cibler tous les éléments de la liste.

Maintenant que nous avons vu les sélecteurs d'attribut, nous allons poursuivre avec les sélecteurs de pseudo-classe et de pseudo-élément.

• Précédent
• Aperçu : Blocs de base en CSS
• Suivant