Attribut class HTML

Définition et utilisation

class L'attribut spécifie le nom de classe de l'élément (classname).

class Les attributs sont principalement utilisés pour pointer vers des classes (class) dans les feuilles de style. Cependant, on peut également l'utiliser pour modifier les éléments HTML portant une classe spécifique à l'aide de JavaScript (HTML DOM).

Veuillez également consulter :

Tutoriel HTML :Attributs HTML

Tutoriel CSS :Syntaxe CSS

Manuel de référence CSS :Sélecteur .class CSS

Manuel de référence HTML DOM :Méthode getElementsByClassName() HTML DOM

Manuel de référence HTML DOM :Propriété className HTML DOM

Manuel de référence HTML DOM :Propriété classList HTML DOM

Manuel de référence HTML DOM :Objet Style du Document DOM HTML

Exemple

Exemple 1

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">Veuillez noter, c'est un paragraphe important. :)</p>
</body>
</html>

Essayer par vous-même

Plus d'exemples en bas de la page.

Syntaxe

<element class="classname">

Valeur de l'attribut

Valeur Description
classname

Spécifiez une ou plusieurs classes pour un élément.

Pour spécifier plusieurs classes, séparez-les par des espaces.

Cela permet de combiner plusieurs classes pour un élément HTML.

Par exemple : <span class="left important">

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 traits de soulignement ("_").

Plus d'exemples

Exemple 2

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">Titre 1</h1>
<p>Un paragraphe.</p>
</body>
</html>

Essayer par vous-même

Exemple 3

Ajouter une couleur de fond jaune en utilisant JavaScript au premier élément de classe="example" (index 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Essayer par vous-même

Exemple 4

Ajoutez la classe "mystyle" à l'élément id "myDIV" en utilisant JavaScript :

document.getElementById("myDIV").classList.add("mystyle");

Essayer par vous-même

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support