CSS id et class
Apprenez à utiliser les sélecteurs CSS id et class pour cibler des éléments HTML précis ou plusieurs éléments à la fois. Exemples inclus.
Dans le chapitre précédent, nous avons étudié les sélecteurs. Nous allons maintenant parler des sélecteurs id et class, qui sont les deux sélecteurs basés sur les attributs auxquels vous recourrez le plus souvent pour styliser une page web.
Ce chapitre explique ce que fait chaque sélecteur, comment l'écrire, en quoi ils diffèrent — et, tout aussi important — quand choisir l'un plutôt que l'autre.
Le sélecteur CSS id
Un sélecteur id cible le seul élément HTML dont l'attribut id correspond au nom donné. Puisqu'un id doit être unique au sein d'une page, un sélecteur id est destiné à styliser un élément précis, et non un groupe d'éléments.
Dans les feuilles de style internes et externes, on écrit un sélecteur id avec un dièse (#) suivi de la valeur de l'id : #name { ... }.
Exemple de sélecteur ID :
Sélecteur CSS ID pour un élément HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Ici, nous avons attribué au deuxième paragraphe l'id blue (id="blue") et déclaré son style avec la propriété color — #blue { color: #1c87c9; } — dans la section <head>. Seul cet élément est ciblé, donc seul le deuxième paragraphe devient bleu ; le premier et le troisième conservent leur couleur par défaut.
Une valeur id ne peut pas contenir d'espaces et, par convention, ne doit pas commencer par un chiffre. Ouvrez l'exemple dans l'éditeur pour confirmer que seul le deuxième paragraphe est en #1c87c9.
Le sélecteur CSS class
Un sélecteur class cible chaque élément dont l'attribut class contient le nom donné. Utilisez-le lorsque le même style doit s'appliquer à plusieurs éléments — par exemple, un style .warning partagé par plusieurs avis, ou un style .btn réutilisé sur de nombreux boutons.
Dans les feuilles de style internes et externes, on écrit un sélecteur class avec un point (.) suivi du nom de la classe : .name { ... }.
Exemple de sélecteur class :
Exemple de sélecteur CSS Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Ici, la même classe blue est appliquée à deux éléments différents — un titre et un paragraphe (class="blue") — et stylisée une seule fois avec .blue { color: #1c87c9; }. Le titre et le troisième paragraphe deviennent tous deux #1c87c9, tandis que le paragraphe du milieu (qui n'a pas de classe) reste inchangé. Définir la règle une seule fois et la réutiliser, c'est précisément l'utilité des classes.
Plusieurs classes sur un même élément
Un élément peut porter plusieurs classes simultanément. Listez-les dans l'attribut class séparées par des espaces, et chaque règle correspondante s'applique :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Cette composabilité explique pourquoi les classes sont le pilier de CSS : des classes petites et mono-fonctionnelles peuvent être combinées et réutilisées à travers toute la page.
La différence entre id et class
La distinction fondamentale est l'unicité :
- Un id est unique — chaque élément ne peut avoir qu'un seul id, et chaque page ne devrait contenir qu'un seul élément portant un id donné. Réutiliser le même id sur plusieurs éléments produit du HTML invalide et peut perturber les scripts et les fonctions d'accessibilité qui supposent que les ids sont uniques.
- Une class est réutilisable — la même classe peut apparaître sur de nombreux éléments, et un seul élément peut avoir plusieurs classes.
| id | class | |
|---|---|---|
| Symbole en CSS | # | . |
| Occurrences par page | une seule | illimitées |
| Par élément | un seul id | plusieurs classes |
| Usage typique | un élément unique (ex. : un en-tête de page, une cible d'ancre) | style répété, composants |
Les ids ont également plus de poids dans la cascade que les classes. Lorsqu'une règle id et une règle class ciblent toutes deux le même élément, la règle id l'emporte quel que soit l'ordre de déclaration — voir la spécificité CSS à travers les sélecteurs. Ce poids supplémentaire est une raison pour laquelle de nombreux guides de style préfèrent les classes pour le style et réservent les ids aux liens internes à la page (href="#section") et aux accroches JavaScript.
Lequel dois-je utiliser ?
En pratique, utilisez les classes pour le style. Elles sont réutilisables, faciles à surcharger et maintiennent une spécificité faible et prévisible. Recourez à un id uniquement lorsque vous avez vraiment besoin d'un identifiant unique sur un élément — pour des liens de fragment, des associations label/for de formulaire, ou getElementById en JavaScript.