CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Exercice de TD

Désamorcer les !important

Cascade, spécificité et héritage · niveau 3 (difficile)

Énoncé


body {
  font-family: system-ui, sans-serif;
}

#catalogue table td {
  color: #222;
}

.prix {
  color: #a8520a !important;
  font-weight: bold !important;
}

.prix-barre {
  color: #555 !important;
  font-weight: normal !important;
  text-decoration: line-through;
}


  <main id="catalogue">
    <table>
      <caption>Promotions</caption>
      <tbody>
        <tr>
          <th scope="row">Analyse MPSI</th>
          <td class="prix-barre">45,00 €</td>
          <td class="prix">40,00 €</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>

Expliquer pourquoi l'auteur a dû écrire ces !important (que se passerait-il sans eux ?), puis réécrire la feuille, et au besoin le HTML, pour obtenir le même rendu sans aucun !important.

Corrigé

La règle #catalogue table td a la spécificité $(1, 0, 2)$ : sans !important, elle bat .prix et .prix-barre, $(0, 1, 0)$ , et tous les prix seraient en #222. Le premier !important a forcé les suivants (font-weight: normal !important n'était même pas nécessaire).

Correction : dans le HTML, remplacer l'identifiant par une classe, class="catalogue", puis ranger les règles par spécificité croissante :


body {
  font-family: system-ui, sans-serif;
}

.catalogue td {
  color: #222;
}

.catalogue .prix {
  color: #a8520a;
  font-weight: bold;
}

.catalogue .prix-barre {
  color: #555;
  text-decoration: line-through;
}

.catalogue td $(0, 1, 1)$ , puis .catalogue .prix et .catalogue .prix-barre $(0, 2, 0)$ : plus besoin de forcer. Dans Chromium, les deux versions donnent le même rendu : prix barré rgb(85, 85, 85), graisse 400, barré ; prix réduit rgb(168, 82, 10), graisse 700. (Si le HTML ne pouvait pas être modifié, :where(#catalogue) td aurait aussi désamorcé le conflit.)

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →