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. La classe bat la balise — et un sélecteur combiné additionne ses morceaux.

📖 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: green;
}

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.

Pour comparer deux sélecteurs, compte ce qu'ils contiennent en trois colonnes : id, classe, balise. Puis lis chaque ligne comme un nombre : p donne 001, soit 1 ; .special donne 010, soit 10. Le plus grand nombre gagne. La colonne id reste à zéro pour l'instant : son tour arrive juste après.

Et quand un sélecteur combine plusieurs morceaux, comme li a au module 4 ? Chaque morceau compte dans sa colonne, l'espace entre eux ne compte pas. Voici le piège le plus courant des vrais projets — le titre vedette refuse son turquoise :

<div class="carte">
    <h2>Répétition du jeudi</h2>
    <h2 class="vedette">Concert de Noël</h2>
</div>

.carte h2 {
    color: dimgray;
}

.vedette {
    color: teal;
}

Pourtant, .vedette est écrite en dernier ! Compte les morceaux : .carte h2 contient une classe et une balise, il se range 0|1|1, soit 11. .vedette n'a qu'une classe : 0|1|0, soit 10.

11 bat 10 : la règle générale gagne. Pour réparer, deux voies propres : alléger la générale (h2 tout court ne pèse plus que 1) ou renforcer la spécifique (.carte .vedette pèse 20). Essaie les deux dans le calculateur :

Dans les deux cas, la règle turquoise devient la plus lourde : 10 bat 1, ou 20 bat 11.

Ce qui ne marche pas : déplacer .vedette encore plus bas. Elle y est déjà — l'ordre ne départage que les ex æquo.

📝 Consigne

Sur le panneau d'infos du club, l'annulation du match doit sortir en rouge sombre. La règle .urgent existe, tout en bas de la feuille... et pourtant la ligne reste grise. Mène l'enquête :

1. Calcule le poids des deux règles qui visent la ligne urgente
2. Corrige la feuille pour que l'annulation passe en darkred : à toi de choisir la voie
3. Les lignes ordinaires restent grises, et rien ne se règle dans le HTML