Attribut HTML universel : class

L'attribut universelclass est une liste des classes de l'élément, séparées par desespaces ASCII.

Exemple interactif

<p>Narrateur&nbsp;: Ceci est le début de la pièce.</p><p>  Le point ci-dessus semble un peu évident. À supprimer/réécrire&nbsp;?</p><p>Narrateur&nbsp;: Je dois vous prévenir, ce début est très excitant.</p><p>  [Les lumières s'allument et le vent souffle&nbsp;; Caspian entre côté cour]</p>

.note {  font-style: italic;  font-weight: bold;}.editorial {  background: rgb(255 0 0 / 0.25);  padding: 10px;}.editorial::before {  content: "Editeur : ";}

Syntaxe

L'attributclass est une liste de valeurs de classes séparées par desespaces ASCII.

Chaque valeur de classe peut contenir n'importe quel caractère Unicode (sauf, bien sûr, les espaces ASCII). Cependant, lorsqu'elles sont utilisées dans des sélecteurs CSS, soit depuis JavaScript avec des API commeDocument.querySelector(), soit dans des feuilles de style CSS, les valeurs d'attribut de classe doivent être desidentifiants CSS valides. Cela signifie que si une valeur d'attribut de classe n'est pas un identifiant CSS valide (par exemple,my?class ou1234), elle doit être échappée avant d'être utilisée dans un sélecteur, soit avec la méthodeCSS.escape(), soitmanuellement.

Pour cette raison, il est recommandé que les développeur·euse·s choisissent des valeurs pour les attributs de classe qui sont des identifiants CSS valides et qui ne nécessitent pas d'échappement.

Description

Les classes permettent au CSS et à JavaScript de sélectionner et d'accéder à des éléments spécifiques via lessélecteurs de classe ou des fonctions commedocument.getElementsByClassName().

Bien que la spécification n'impose aucune exigence sur le nom des classes, il est conseillé aux développeur·euse·s web d'utiliser des noms qui décrivent la finalité sémantique de l'élément, plutôt que sa présentation. Par exemple,attribut pour décrire un attribut plutôt queitalique, même si un élément de cette classe peut être présenté enitalique. Les noms sémantiques restent logiques même si la présentation de la page change.