L'id, poids lourd

🎯 Objectif

Compléter la hiérarchie des poids — balise < classe < id —, calculer le poids d'un sélecteur combiné qui contient un 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

Même lecture en trois colonnes : .badge donne 010, soit 10 ; #badge-complet donne 100, soit 100. L'id occupe la colonne la plus à gauche, la plus lourde : il gagne.

Dans un sélecteur combiné, l'id reste dans sa colonne, et chaque autre morceau s'ajoute dans la sienne. #galerie img contient un id et une balise : 1|0|1, soit 101. Il bat donc un id seul, qui ne vaut que 100. Un id ne gagne pas d'office : on compte toujours.

Il existe une arme au-dessus de tout ça : !important. Il se colle après la valeur, juste avant le point-virgule, et il écrase n'importe quel poids — même celui d'un id :

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

.badge {
    background-color: lightcyan !important;
}

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

Le badge complet a perdu son or : la classe, pourtant plus légère, a gagné par la force. 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, l'alerte météo doit crever l'écran en rose vif. Elle a même son propre id... et pourtant elle reste dorée. Mène l'enquête :

1. Calcule le poids des deux règles qui visent l'alerte
2. Corrige la feuille pour que l'alerte passe en hotpink : à toi de choisir la voie
3. Le bandeau de la buvette reste doré, et le tout sans !important