HTML Attribut de classe
L'attribut HTML class est utilisé pour spécifier une classe pour un élément HTML.
Plusieurs éléments HTML peuvent partager la même classe.
Utilisation de l'attribut de classe
L'attribut class est souvent utilisé pour pointer vers un nom de classe dans une feuille de style. Il peut également être utilisé par JavaScript pour accéder et manipuler des éléments portant le nom de classe spécifique.
Dans l'exemple suivant, nous avons trois éléments <div> avec un attribut class avec la valeur "city". Les trois éléments <div> seront stylés de la même manière selon le style .city définition dans la section principale :
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>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Try it Yourself »
Dans l'exemple suivant, nous avons deux éléments <span> avec un attribut class avec la valeur "note". Les deux éléments <span> seront stylés de la même manière selon la définition de style .note dans la section d'en-tête :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Try it Yourself »
Conseil : L'attribut class peut être utilisé sur n'importe quel élément HTML.
Remarque : Le nom de la classe est sensible à la casse !
Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS.
La syntaxe de la classe
Pour créer une classe ; écrivez un 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">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Try it Yourself »
Plusieurs classes
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 également à la classe main et obtiendra les styles CSS des deux classes :
Exemple
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Try it Yourself »
Différents éléments peuvent partager la même classe
Différents éléments HTML peuvent pointer vers le même nom de classe.
Dans l'exemple suivant, <h2> et <p> pointent vers la classe "city" et partagent le même style :
Exemple
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Try it Yourself »
Utilisation de l'attribut de classe en JavaScript
Le nom de la classe peut également être utilisé par JavaScript pour effectuer certaines tâches pour des éléments spécifiques.
JavaScript peut accéder aux éléments avec un nom de classe spécifique avec la méthode getElementsByClassName() :
Exemple
Cliquez sur un bouton pour masquer tous les éléments portant le nom de la classe "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Try it Yourself »
Ne vous inquiétez pas si vous ne comprenez pas le code de l'exemple ci-dessus.
Vous en apprendrez plus sur JavaScript dans notre chapitre HTML JavaScript, ou vous pourrez étudier notre Tutoriel JavaScript une.
Résumé du chapitre
- L'attribut HTML
classspécifie un ou plusieurs noms de classe pour un élément - Les classes sont utilisées par CSS et JavaScript pour sélectionner et accéder à des éléments spécifiques
- L'attribut
classpeut être utilisé sur n'importe quel élément HTML - Le nom de la classe est sensible à la casse
- Différents éléments HTML peuvent pointer vers le même nom de classe
- JavaScript peut accéder aux éléments portant un nom de classe spécifique avec la méthode
getElementsByClassName()
HTML Exercices
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML — Cours - Vidéo W3Schools
Cette vidéo explique l'attribut class et comment les utiliser en HTML.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
