Sélecteurs d'attribut

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.

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.

<h1>Présence d'attributs et sélecteurs de valeur</h1>
<ul>
  <li>Élément 1</li>
  <li class="a">Élément 2</li>
  <li class="a b">Élément 3</li>
  <li class="ab">Élément 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}

Essayez de modifier le CSS ci-dessus pour ajouter une règle qui sélectionne uniquement les éléments de liste avec une valeur d'attribut class de ab, et leur donne une color de texte white et un background-color purple.

Cibler en fonction d'une sous-chaîne de caractères

Les sélecteurs suivant permettent de cibler un élément en fonction de la valeur de l'attribut et d'une sous-chaîne de caractères 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 peut utiliser [class^="box-"] afin de cibler les deux (ou [class|="box"] comme décrite ci-dessus).

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.

<h1>Sélecteurs de correspondance de sous-chaîne de caractères d'attribut</h1>
<ul>
  <li class="a">Élément 1</li>
  <li class="ab">Élément 2</li>
  <li class="bca">Élément 3</li>
  <li class="bcabc">Élément 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}

li[class$="a"] {
  background-color: yellow;
}

li[class*="a"] {
  color: red;
}

Essayez de modifier le CSS ci-dessus pour ajouter une règle qui sélectionne uniquement les éléments de liste dont la valeur de l'attribut class se termine par b ou c, et leur donne une border de 2px, solid, black. Vous devez peut-être utiliser une liste de sélecteurs pour résoudre cet exercice.

Résumé

Maintenant que nous avons terminé avec les sélecteurs d'attribut, vous pouvez continuer avec le prochain article et lire sur les sélecteurs de pseudo-classe et de pseudo-élément.

• Précédent
• Aperçu : Bases de la mise en forme CSS
• Suivant