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 list items 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 quelquepart 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 (majucule ou minuscule indifférentes), ajoutez la valeur i avant la parenthèse fermante. 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.

À faire vous-mêmes

Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :

  • Cibler l'élément <a> ayant un attribut title et colorer sa bordure en rose (border-color: pink).
  • Cibler l'élément <a> dont l'attribut href contient le mot contact quelque part dans sa valeur et colorer sa bordure en orange (border-color: orange).
  • Cibler l'élément <a> dont la valeur href commence par https et colorer sa bordure en vert (border-color: green).

Note : Vous pouvez jeter un œil à la solution ici —  mais essayez d'abord de la trouver par vous-même !

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.

Dans ce cours

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS