L'id, poids lourd

🎯 Objectif

Compléter la hiérarchie des poids — balise < classe < id — et apprendre pourquoi le !important est un piège.

📖 Exemple

Sur la page de la chorale, un badge doit trancher sur tous les autres :

<p class="badge">Inscriptions ouvertes</p>
<p class="badge" id="badge-complet">Concert de Noël : COMPLET</p>

.badge {
  background-color: lightcyan;
}

#badge-complet {
  background-color: gold;
}

Le second badge porte la classe et l'id : deux règles se le disputent, l'id l'emporte. La hiérarchie complète des poids :

balise p < classe .badge < id #badge-complet

Il existe une arme au-dessus de tout ça : !important, collé après une valeur, écrase n'importe quel poids. Résiste à la tentation. Une feuille pleine de !important devient indébogable — chaque victoire forcée en appelle une autre, et plus personne ne comprend qui gagne ni pourquoi. Les pros le réservent aux cas désespérés ; toi, tu gagnes par le poids.

📝 Consigne

À la fête du village, les bandeaux sont dorés — mais l'alerte météo doit crever l'écran. La règle de classe existe déjà :

1. Garde la règle .bandeau : le bandeau de la buvette reste doré
2. Ajoute une règle pour l'id alerte-meteo, avec background-color et la valeur hotpink
3. Le tout sans !important — l'id gagne déjà par son poids