Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Attribut de classe HTML


classL' attribut HTML 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 class

L' classattribut est souvent utilisé pour pointer vers un nom de classe dans une feuille de style. Il peut également être utilisé par un JavaScript pour accéder et manipuler des éléments avec le nom de classe spécifique.

Dans l'exemple suivant, nous avons trois <div>éléments avec un classattribut avec la valeur "ville". Les trois <div> éléments seront stylisés de la même manière selon la .city définition de style 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>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>

Dans l'exemple suivant, nous avons deux <span>éléments avec un classattribut avec la valeur "note". Les deux <span> éléments seront stylisés de la même manière selon la .note définition de style dans la section head :

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>

Conseil : L' classattribut 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 didacticiel 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 "ville":

<!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>

Cours 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 stylisé en fonction de toutes les classes spécifiées.

Dans l'exemple suivant, le premier <h2>élément appartient à la fois à la cityclasse et également à la mainclasse, 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>

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>

Utilisation de l'attribut class 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 getElementsByClassName()méthode :

Exemple

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

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

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

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


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' classattribut peut ê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 avec un nom de classe spécifique avec la getElementsByClassName() méthode

Exercices HTML

Testez-vous avec des exercices

Exercer:

Créez un sélecteur de classe nommé "spécial".

Ajoutez une propriété color avec la valeur "blue" dans la classe "special".

<!DOCTYPE html>
<html>
<tête>
<style>

  ;

</style>
</head>
<body>

<p class="special">Mon paragraphe</p>

</body>
</html>