class vs id
class peut se répéter sur plusieurs éléments et s’y combiner, alors que id doit être unique dans tout le document et sert aux ancres, étiquettes et à JavaScript.
Comparaison point par point
#Unicité
- class
- Peut se répéter sur plusieurs éléments
- id
- Doit être unique dans tout le document
Nombre de valeurs par élément
- class
- Plusieurs, séparées par un espace
- id
- Une seule valeur
Spécificité en CSS
- class
- Faible, facile à surcharger
- id
- Très élevée, difficile à surcharger
Utilisations typiques
- class
- Style de plusieurs éléments,
classListen JS - id
- Ancres,
label for,getElementById
Recommandation pour le style
- class
- Oui, le moyen de base en CSS
- id
- Mieux vaut éviter, en raison de sa forte spécificité
Exemple
#<p class="card">Première carte</p>
<p class="card">Deuxième carte, avec la même classe card</p>
<h2 id="tarifs">Tarifs</h2>Définition et utilisation
#L’attribut class est multiple : le même nom peut apparaître sur plusieurs éléments, et un seul élément peut avoir plusieurs classes séparées par un espace, par ex. class="btn btn-primary". C’est le moyen de base pour styliser en CSS et gérer des éléments via classList en JavaScript, et sa spécificité est faible et facile à surcharger.
L’attribut id doit être unique dans tout le document, donc un élément n’a toujours qu’une seule valeur. Il sert à des liaisons précises et uniques : une ancre dans l’adresse (#faq), une liaison <label for> avec un champ, ou une recherche rapide d’élément via getElementById. En CSS, il a une spécificité très élevée, ce qui rend le sélecteur #id difficile à surcharger ensuite.
Règle de choix simple : pour styliser plusieurs éléments semblables et travailler avec un script, utilisez class. Pour des points d’ancrage uniques qui désignent quelque chose de précis (étiquette, ancre, référence ponctuelle en JavaScript), utilisez id.
Syntaxe
#<élément class="nom1 nom2">
<élément id="identifiant-unique">Plus d’exemples
#<label for="email">E-mail</label>
<input id="email" type="email"><button id="save" type="button">Enregistrer</button>
<button id="save" type="button">Enregistrer (id dupliqué !)</button>getElementById ne renverra que le premier des deux. La classe class, elle, peut se répéter sans problème.
Bonnes pratiques
#- Pour le style en CSS, utilisez
class. Le sélecteur#ida une spécificité très élevée et est difficile à surcharger. iddoit être unique dans tout le document, pas seulement à l’intérieur d’un composant.- Un élément peut avoir plusieurs classes séparées par un espace, mais un seul
id.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.