Le poids de la classe

🎯 Objectif

Découvrir la deuxième loi de la cascade : le poids des sélecteurs se compare avant l'ordre d'écriture — et la classe bat la balise.

📖 Exemple

La chorale grise toutes ses annonces, sauf la spéciale :

<p>Répétition jeudi à 20 h.</p>
<p class="special">Concert de Noël : billets en vente !</p>

.special {
  color: teal;
}

p {
  color: dimgray;
}

Surprise : la règle .special est écrite avant la règle p... et elle gagne quand même. La première loi — « la dernière l'emporte » — ne s'applique pas ici, car les deux sélecteurs n'ont pas le même poids.

Retiens la hiérarchie : un sélecteur de classe pèse plus lourd qu'un sélecteur de balise. Le navigateur compare d'abord les poids ; l'ordre d'écriture ne départage que les ex æquo. Logique, au fond : p dit « tous les paragraphes », .special dit « celui-là précisément » — le plus précis l'emporte.

📝 Consigne

Le panneau d'infos du club grise tout... mais l'annulation du match doit sauter aux yeux. La règle générale est déjà là — ajoute la spécifique :

1. Garde la règle p existante : les lignes ordinaires restent grises
2. Ajoute une règle pour la classe urgent, avec la propriété color et la valeur darkred
3. Observe : la ligne urgente ignore le gris — sa classe pèse plus lourd