Cette traduction est en cours.

Les sélecteurs d'attribut sont une variété particulière de sélecteurs qui font correspondre des éléments selon leur attribut attributes ou leur valeur d'attribut. Leur syntaxe de base est composée de crochets ([]) entourant un nom d'attribut suivi d'une condition optionnelle sur la concordance de la valeur de l'attribut. Les sélecteurs d'attribut comportent deux catégories selon la manière dont ils font correspondre les valeurs d'attribut : sélecteurs d'attribut Présence et valeur et sélecteurs d'attribut Valeur de sous-chaîne.

Sélecteurs d'attribut « présence et valeur »

Ces sélecteurs d'attribut recherchent une correspondance exacte à une valeur d'attribut :

  • [attr] : ce selecteur retiendra tous les éléments avec l'attribut attr, quelle que soit sa valeur.
  • [attr=val] : ce sélecteur retiendra  tous les éléments avec l'attribut attr, mais uniquement si sa valeur est val.
  • [attr~=val]: ce sélecteur retiendra  tous les éléments avec l'attribut attr, mais uniquement si sa val est un des mots de la liste des valeurs séparées par une espace contenues dans attr

Voyons un exemple illustré par ce morceau de code HTML :

Ingrédients pour ma recette : <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomates</li>
  <li data-quantity="3" data-vegetable>Oignons</li>
  <li data-quantity="3" data-vegetable>Ail</li>
  <li data-quantity="700g" data-vegetable="pas piquants comme les piments">Poivrons rouges</li>
  <li data-quantity="2kg" data-meat>Poulet</li>
  <li data-quantity="optional 150g" data-meat>Allumettes de petit salé</li>
  <li data-quantity="optional 10ml" data-vegetable="liquide">Huile d'olive</li>
  <li data-quantity="25cl" data-vegetable="liquide">Vin blanc</li>
</ul>

Et une simple feuille de style :

/* Tous les éléments avec l'attribut "data-vegetable"
   seront rendus en texte de couleur verte */
[data-vegetable] {
  color: green;
}

/* Tous les éléments avec l'attribut "data-vegetable"
   de valeur exacte "liquid" seront rendus sur fond doré */
[data-vegetable="liquide"] {
  background-color: goldenrod;
}

/* Tous les éléments avec l'attribut "data-vegetable",
   contenant la valeur "piquants", parmi d'autres,
   seront rendus en texte de couleur rouge */
[data-vegetable~="piquants"] {
  color: red;
}

Le résultat est le suivant :

Note : Les attributs data-* visibles dans cet exemple s'appellent attributs de données. C'est un moyen d'utiliser des données personnalisées dans un attribut HTML ; elles sont facilement extractibles et utilisables. Voir Comment utiliser des attributs de données pour plus d'informations.

Sélecteurs d'attribut « valeur de sous-chaîne »

Les sélecteurs d'attributs de cette classe sont également connus sous le nom de « sélecteurs de type expression-régulière », car ils donnent une certaine souplesse dans la recherche des correspondances à la manière des expressions régulières. (mais soyons clairs, il ne s'agit pas de véritables expressions régulières) :

  • [attr|=val] : ce selecteur retiendra tous les éléments avec l'attribut attr, pour lesquels la valeur est exactement val ou débute par val- (attention, le tiret ici n'est pas une erreur, cela permet de gérer les codes de langues.)
  • [attr^=val] : ce selecteur retiendra tous les éléments avec l'attribut attr, pour lesquels la valeur débute par val.
  • [attr$=val] : ce selecteur retiendra tous les éléments avec l'attribut attr, pour lesquels la valeur se termine par val.
  • [attr*=val] : ce selecteur retiendra tous les éléments avec l'attribut attr, pour lesquels la valeur contient la sous-chaîne val (une sous-chaîne est simplement une partie de chaîne, par ex. « cat » est une sous-chaîne de  « caterpillar ».) 

Poursuivons avec notre exemple précédent et ajoutons les règles CSS suivantes :

/* Usage classique pour une sélection de langue */
[lang|="fr"] {
  font-weight: bold;
}

/* Tous les éléments avec l'attribut "data-quantity", pour lesquels la valeur
   commence par "optionel" */
[data-quantity^="optionel"] {
  opacity: 0.5;
}

/* Tous les éléments avec l'attribut "data-quantity", pour lesquels la valeur
   se termine par "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* Tous les éléments avec l'attribut "data-vegetable" contenant la sous-chaîne
   "pas piquants" reviennent en texte vert */
[data-vegetable*="pas piquants"] {
  color: green;
}


Avec ces nouvelles règles, nous obtenons :

Apprentissage actif : styliser des résultats de foot

 

Pour cet apprentissage actif, vous essayerez d'ajouter des sélecteurs d'attributs à certaines règles pour styliser une simple liste de résultats de foot. Il y a trois choses à faire ici :

  •     Les trois premières règles ajouteront une icône de drapeau britannique, allemand et espagnol à gauche des éléments de la liste. Remplissez les sélecteurs d'attributs appropriés afin que chaque équipe reçoive respectivement le drapeau de son pays, correspondant à la langue.
  •     Les règles 4-6 ajoutent une couleur de fond aux éléments de la liste pour indiquer si l'équipe est montée dans le classement (vert, rgba(0,255,0,0,0,7)), descendue (rouge, rgba(255,0,0,0,0,0.5)) ou est restée au même niveaut (bleu, rgba(0,0,255,0,0.5)).  Remplissez les sélecteurs d'attributs appropriés pour faire correspondre les bonnes couleurs aux bonnes équipes, ainsi que les chaînes inc, same et dec qui apparaissent dans les valeurs de l'attribut data-perf.
  •     Les règles 7-8 mettent en gras les équipes sur le point d'être promues  et en italique grisé les équipes risquant d'être reléguées. Remplissez les sélecteurs d'attributs appropriés pour faire correspondre ces styles aux bonnes équipes, assortis des chaînes pro et rel qui apparaissent dans les valeurs d'attributs data-perf.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Voir aussi

Voir la page de référence des Sélecteurs d'attribut pour plus d'exemples utiles.

Dans l'article suivant

Là, nous passerons à la vitesse supérieure, en regardant Pseudo-classes et  pseudo-éléments.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,