Qu'est-ce qu'une classe en HTML ?

Les classes sont des attributs HTML permettant de cibler un ou plusieurs éléments afin d'appliquer des styles CSS ou d'effectuer des manipulations JavaScript. Elles offrent une façon efficace d'organiser et de styliser le contenu de vos pages web.

Utilisation des classes pour le style CSS

L'attribut class est principalement utilisé pour appliquer des styles à un ou plusieurs éléments HTML. Il est possible d'assigner plusieurs classes à un même élément en les séparant par des espaces, par exemple : class="class1 class2 class3".

Dans le fichier CSS, on utilise la syntaxe suivante pour sélectionner une classe : .nom-de-classe { }

La sélection d'une classe se fait à l'aide d'un nom précédé d'un point (.). Voici un exemple avec un wrapper div qui contient un h1 et trois h2. Le style du h1 sera unique, tandis que tous les h2 partageant la même classe recevront le même style :

    
    


    

        
Bienvenue dans la Classe !
        

        

        

    

Manipulation des classes avec JavaScript

L'attribut class permet également d'effectuer des opérations JavaScript sur les éléments HTML. À travers le Document Object Model (DOM), plusieurs méthodes JavaScript existent pour sélectionner les éléments en fonction de leur classe.

Prenons l'exemple précédent en le reliant à un fichier JavaScript :

window.onload = function () {
    const subheadings = document.getElementsByClassName('sub-heading');
    for (let i = 0; i < subheadings.length; i++) {
        subheadings.item(i).innerText = `Sous-titre ${i + 1}`;
    }
};

Dans ce code, on assigne un gestionnaire d'événements à la propriété onload de l'objet window. Une fois la page chargée, les éléments avec la classe sub-heading sont collectés. Ensuite, un boucle parcourt ces éléments pour changer leur propriété innerText.