HTML attribut de classe

L'attribut class en HTML est utilisé pour spécifier une classe pour un élément HTML.

Plusieurs éléments HTML peuvent partager la même classe.

L'attribut de classe

L'attribut class est souvent utilisé pour désigner un nom de classe dans une feuille de style. Il peut également être utilisé par JavaScript pour accéder et manipuler des éléments ayant un nom de classe spécifique.

Dans l'exemple suivant, nous avons trois éléments <div> avec un attribut class ayant la valeur "city". Tous les trois éléments <div> seront stylés de manière identique selon la définition de style .city dans la section head :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris est la capitale de la France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>
</div>

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

Dans l'exemple suivant, nous avons deux éléments <span> avec un attribut class ayant la valeur "note". Les deux éléments <span> seront stylés de manière identique selon la définition de style .note dans la section head :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>Mon <span class="note">Important</span> Titre</h1>
<p>Ceci est un texte <span class="note">important</span>.</p>

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

Conseil : L'attribut class peut être utilisé sur n'importe quel élément HTML.

Remarque : Le nom de classe est sensible à la casse !

Conseil : Vous pouvez en apprendre beaucoup plus sur le CSS dans notre Tutoriel CSS .

La syntaxe pour la classe

Pour créer une classe, écrivez un caractère point (.) suivi d'un nom de classe. Ensuite, définissez les propriétés CSS entre accolades {} :

Exemple

Créez une classe nommée "city" :

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>

<h2 class="city">Paris</h2>
<p>Paris est la capitale de la France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>

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

Classes multiples

Les éléments HTML peuvent appartenir à plusieurs classes.

Pour définir plusieurs classes, séparez les noms de classe par un espace, par exemple <div class="city main">. L'élément sera stylé selon toutes les classes spécifiées.

Dans l'exemple suivant, le premier élément <h2> appartient à la fois à la classe city et à la classe main , et recevra les styles CSS des deux classes :

Exemple

<h2 class="city main">Londres</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Essayez-le vous-même »

Différents éléments peuvent partager la même classe

Différents éléments HTML peuvent avoir le même nom de classe.

Dans l'exemple suivant, les éléments <h2> et <p> partagent tous deux la classe "city" et auront le même style :

Exemple

<h2 class="city">Paris</h2>
<p class="city">Paris est la capitale de la France</p>
Essayez-le vous-même »

Utilisation de l'attribut de classe en JavaScript

Le nom de classe peut également être utilisé par JavaScript pour effectuer certaines tâches sur des éléments spécifiques.

JavaScript peut accéder aux éléments ayant un nom de classe spécifique grâce à la méthode getElementsByClassName() :

Exemple

Cliquez sur un bouton pour masquer tous les éléments ayant le nom de classe "city" :

<script>
function myFunction() {
var x = document.getElementsByClassName("city") ;
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Essayez-le vous-même »

Ne vous inquiétez pas si vous ne comprenez pas le code dans l'exemple ci-dessus.

Vous en apprendrez davantage sur JavaScript dans notre chapitre HTML JavaScript , ou vous pouvez étudier notre Tutoriel JavaScript .

Résumé du chapitre

  • L'attribut HTML class spécifie un ou plusieurs noms de classe pour un élément
  • Les classes sont utilisées par le CSS et JavaScript pour sélectionner et accéder à des éléments spécifiques
  • L'attribut class peut être utilisé sur n'importe quel élément HTML
  • Le nom de classe est sensible à la casse
  • Différents éléments HTML peuvent avoir le même nom de classe
  • JavaScript peut accéder aux éléments ayant un nom de classe spécifique grâce à la méthode getElementsByClassName()

Vidéo : Classe HTML