Niveau Niveau débutant

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

Articlehtml

Publié par Raphael le 25 Février 2005, mis à jour le 03 Septembre 2018 (322042 lectures)

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)

On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d'une page et interagir avec eux en JavaScript, 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 class en priorité car c'est beaucoup plus pratique et souple :

Vous pouvez associer plusieurs classes à un même élément et donc modulariser au mieux votre feuille de style.
Vous n'avez pas besoin d'anticiper s'il s'agira d'un unique élément de la page ou s'il pourra y en avoir plusieurs par la suite.

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 ?

L'id est permet en JavaScript de désigner les éléments avec la fonction document.getElementById(). Mais il existe aussi un équivalent pour les classes et l'API QuerySelector.
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>
```

Quiz