HTML

Quelle est la différence entre une classe et un id  ?

Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.toto) et un id (#toto)

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (162993 lectures)
Tags : css, id, class, xhtml

Une différence fondamentale

On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d'une page, mais...

  • un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
  • une classe peut caractériser plusieurs objets (identiques ou non)

Par exemple, il est possible d'avoir ce code :

<div class="toto"></div>
<div class="toto"></div>

Mais il n'est pas correct d'avoir ce code :

<div id="toto"></div>
<div id="toto"></div>

En effet, l'id ne doit désigner qu'un seul objet du document. On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans la page html.

Pour la feuille de style CSS, les règles seront écrites avec la syntaxe #nom_id pour les id et .nom_de_classe pour les class. Par exemple :

/* L'élément unique id="header", par exemple <div id="header"> */
#header {
  background:red;
}

/* Tous les éléments de classe "liens" : <ul class="liens"> ou <a class="liens">... */
.liens {
  color:blue;
}

/* Tous les paragraphes de classe "article" : <p class="article"> */
p.article {
  text-align:justify;
}

Pour du code "rigoureux", ce qui est syntaxiquement le plus juste doit être privilégié. Utilisez les id en priorité lorsque vous le pouvez et les class lorsque vous ne pouvez pas. Une balise HTML peut posséder un id et une (ou plusieurs) class mais pas l'inverse. On peut ainsi cibler une balise particulière au sein d'un ensemble d'éléments possédant la même classe.

Par exemple : commencez à utiliser id systématiquement pour les objets unique pour faciliter la lecture du code. Donnez un id à votre body (pour ancre), à votre bloc en-tête, votre bloc gauche, droit, la navigation... Par contre pour les paragraphes ou listes de menu utilisez les classes lorsqu'il y aura plusieurs objets de ce type.

Avantages et inconvénients

Quelle peut être l'utilité d'un id qui ne sert qu'une fois par rapport à la classe qui semble remplir les mêmes fonctions ? Il y a plusieurs raisons à cela, en voici deux parmi d'autres :

  • L'id est pratique car il permet en JavaScript de désigner les éléments avec la fonction document.getElementById(), ce qui facilite la compatibilité entre tous les navigateurs.
  • L'id peut servir d'ancre nommée, puisqu'il permet de remplacer (pour cette fonctionnalité) l'attribut name. On pourra donc écrire un lien pour se rendre en haut de page comme ceci :
    <body id="top">...
    <a href="#top">aller en haut</a>