Attribut class HTML


Exemple

Utilisation de l'attribut class dans un document HTML :

<html>
<head>
<style>
h1.intro {
color: blue;
}

p.important {
color: green;
}
</style>
</head>
<body>

<h1 class="intro">En-tête 1</h1>
<p>Un paragraphe.</p>
<p class="important">Notez que ceci est un paragraphe important. :)</p>

</body>
</html>
Essayez-le vous-même »

Plus d'exemples "Essayez-le vous-même" ci-dessous.

Définition et utilisation

L'attribut class spécifie un ou plusieurs noms de classe pour un élément.

L'attribut class est principalement utilisé pour pointer vers une classe dans une feuille de style. Cependant, il peut également être utilisé par JavaScript (via le DOM HTML) pour apporter des modifications aux éléments HTML ayant une classe spécifiée.

Support des navigateurs

Attribut
class Oui Oui Oui Oui Oui

Syntaxe

< élément class=" nom_de_classe ">

Valeurs d'attribut

Valeur Description
nom_de_classe Spécifie un ou plusieurs noms de classe pour un élément. Pour spécifier plusieurs classes, séparez les noms de classe par un espace, par exemple <span class="left important">. Cela vous permet de combiner plusieurs classes CSS pour un élément HTML.

Règles de nommage :

  • Doit commencer par une lettre A-Z ou a-z
  • Peut être suivi de : lettres (A-Za-z), chiffres (0-9), tirets ("-") et underscores ("_")

Plus d'exemples

Exemple

Ajouter plusieurs classes à un élément HTML :

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}

.important {
background-color: yellow;
}
</style>
</head>
<body>

<h1 class="intro important">En-tête 1</h1>
<p>Un paragraphe.</p>

</body>
</html>
Essayez-le vous-même »

Exemple

Utilisation de JavaScript pour ajouter une couleur de fond jaune au premier élément avec class="example" (index 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
Essayez-le vous-même »

Exemple

Utilisation de JavaScript pour ajouter la classe "mystyle" à un élément avec id="myDIV" :

document.getElementById("myDIV").classList.add("mystyle");
Essayez-le vous-même »

Pages associées

Tutoriel HTML : Attributs HTML

Tutoriel CSS : Syntaxe CSS

Référence CSS : Sélecteur CSS .class

Référence DOM HTML : Méthode HTML DOM getElementsByClassName()

Référence DOM HTML : Propriété HTML DOM className

Référence DOM HTML : Propriété HTML DOM classList

Référence DOM HTML : Objet Style DOM HTML