Sélecteurs d’attribut – CSS

Le sélecteur [attr~=valeur] est un sélecteur CSS qui permet de sélectionner les éléments qui ont un attribut attr dont la valeur contient la chaîne de caractères valeur séparée par des espaces.

Voici quelques exemples pour illustrer ce concept :

<div id="exemple" class="classe1 classe2">Exemple</div>
<div id="exemple2" class="classe3">Exemple 2</div>
<div id="exemple3" data-roles="admin moderator">Exemple 3</div>

/* Sélectionne les éléments qui ont un attribut class contenant la valeur "classe1" */
.classe1 {
  background-color: #f00;
}

/* Sélectionne les éléments qui ont un attribut class contenant la valeur "classe2" */
.classe2 {
  color: #0f0;
}

/* Sélectionne les éléments qui ont un attribut data-roles contenant la valeur "admin" */
[data-roles~="admin"] {
  border: 1px solid #00f;
}

/* Sélectionne les éléments qui ont un attribut data-roles contenant la valeur "moderator" */
[data-roles~="moderator"] {
  font-weight: bold;
}

Dans cet exemple, le sélecteur [data-roles~="admin"] sélectionne les éléments qui ont un attribut data-roles dont la valeur contient la chaîne de caractères « admin » séparée par des espaces. Cela signifie que l’élément #exemple3 sera sélectionné car son attribut data-roles contient la valeur « admin moderator ».

Notez que si vous utilisez un sélecteur [attr=valeur], cela sélectionnera uniquement les éléments qui ont un attribut attr dont la valeur est exactement égale à valeur. Par exemple, [data-roles="admin moderator"] ne sélectionnera pas l’élément #exemple3 car son attribut data-roles n’a pas exactement la valeur « admin moderator », mais plutôt une valeur qui contient cette chaîne de caractères séparée par des espaces.