La note qui reste noire — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 3)

La note qui reste noire

Cascade, spécificité et héritage · niveau 1 (application)

Énoncé


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

/* Les notes en gris et en italique */
.note p {
  color: #555;
  font-style: italic;
}


  <p>Livraison sur le campus le mardi et le vendredi.</p>
  <p class="note">Pas de livraison pendant les vacances universitaires.</p>

La note n'est ni grise ni en italique. Suivre la méthode de débogage de la section 3.10 : que montre l'onglet Styles ? Corriger.

Corrigé

Dans l'onglet Styles du paragraphe, la règle .note p n'apparaît pas du tout : son sélecteur ne désigne pas l'élément. Il signifie « un paragraphe situé dans un élément de classe note », alors que le paragraphe porte lui-même la classe. Il faut le sélecteur composé, sans espace :


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

/* Les notes en gris et en italique */
.note p {
  color: #555;
  font-style: italic;
}

devient


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

/* Les notes en gris et en italique */
p.note {
  color: #555;
  font-style: italic;
}

Vérification : rgb(0, 0, 0), normal avant ; rgb(85, 85, 85), italic après. (Ou plus simplement .note, de spécificité moindre.)