Sélecteurs d'attribut

En étudiant HTML, vous avez vu que les éléments peuvent avoir des attributs, qui leur fournissent des détails supplémentaires. En CSS, on peut utiliser les sélecteurs d'attribut afin de cibler les éléments qui possèdent certains attributs. Dans cet article, nous verrons comment utiliser ces sélecteurs.

Prérequis : Avoir installé les logiciels de bases pour le développement web, savoir manipuler des fichiers, comprendre les fondamentaux en HTML (voir Une introduction à HTML), avoir une idée générale du fonctionnement de CSS (voir Premiers pas en CSS.)
Objectifs : Apprendre ce que sont les sélecteurs d'attributs et comment les utiliser.

Sélecteurs sur la présence et la valeur

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.

Cibler en fonction d'une sous-chaîne

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.

Note : Les caractères ^ et $ sont également utilisés comme ancres au sein des expressions rationnelles pour signifier respectivement commence par et finit par.

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.

Sensibilité à la casse

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.

Note : Il existe également un marqueur plus récent : s, qui forcera une sensibilité à la casse pour les contextes où la casse est normalement ignorée. Toutefois, ce marqueur est moins pris en charge dans les navigateurs et s'avère peu utile dans le cas du HTML.

Résumé

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.