Mémo : classe ou identifiant ?

Mémo · Chapitre 4

Classe ou identifiant ?

Les deux donnent un nom à un élément HTML, pour pouvoir le cibler en CSS ou en JavaScript. La différence tient en une règle : une classe se partage, un identifiant est unique dans la page.

	Classe	Identifiant
Dans le HTML	`class="tarif"`	`id="panier"`
Dans le CSS	`.tarif { … }` avec un point	`#panier { … }` avec un dièse
Combien d'éléments ?	Autant que vous voulez	Un seul par page
Plusieurs sur un élément ?	Oui, séparées par une espace : `class="carte promo"`	Non, un seul identifiant
En JavaScript	`document.querySelectorAll(".tarif")`	`document.getElementById("panier")`
À utiliser pour	Un style qui se répète : boutons, cartes, prix	Un repère unique : le menu, un formulaire, une ancre `#contact`

La spécificité

Qui gagne quand deux règles se contredisent ?

Le navigateur donne un poids à chaque sélecteur. La règle la plus lourde l'emporte, où qu'elle soit écrite dans le fichier. À poids égal, c'est la dernière écrite qui gagne.

1 · 0 · 0

Un identifiant

#solde : le plus fort des trois.

0 · 1 · 0

Une classe

.alerte : bat n'importe quel nombre de balises.

0 · 0 · 1

Une balise

p : le plus faible.

Exemple : le texte s'affiche en vert

#solde  { color: green; }  /* 1 · 0 · 0 : gagne, même écrite avant */
.alerte { color: red; }    /* 0 · 1 · 0 */

À éviter

Les quatre erreurs les plus fréquentes

Oublier le point dans le CSS

tarif  { color: white; }  /* cherche une balise <tarif> */
.tarif { color: white; }  /* correct */

Mettre le point dans le HTML

<p class=".tarif">  <!-- faux -->
<p class="tarif">   <!-- correct -->

Réutiliser un identifiant

<p id="prix">20 $</p>
<p id="prix">35 $</p>  <!-- faux : prenez une classe -->

Écrire deux attributs class

<div class="carte" class="promo">  <!-- le 2e est ignoré -->
<div class="carte promo">          <!-- correct -->