Cascade, spécificité et héritage

Le chapitre précédent s'est terminé sur une énigme. La feuille de la Librairie du Campus contient deux règles qui donnent une couleur aux liens du menu :

header a {
  color: white;
}

a:hover {
  color: #e07a1f;
}

Quand on survole un lien de l'en-tête, les deux s'appliquent. La première est pourtant écrite pour l'en-tête, et la seconde pour tous les liens du site ; on s'attend à ce que la plus précise gagne. C'est la seconde qui l'emporte, et le lien devient ocre sur bleu nuit.

Ce n'est ni un hasard ni un caprice du navigateur. Chaque fois que plusieurs déclarations donnent une valeur à la même propriété d'un même élément, un algorithme précis, la cascade, choisit la gagnante. Et lorsqu'aucune déclaration ne concerne une propriété, un second mécanisme, l'héritage, peut fournir la valeur du parent. Ce sont les deux mots qui font la réputation de CSS ; ce chapitre les rend prévisibles.

3.1 Plusieurs règles pour une même propriété

Partons d'un conflit minimal : trois règles donnent une couleur au même paragraphe.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Un conflit de règles</title>
  <link rel="stylesheet" href="conflit.css">
</head>
<body>
  <main>
    <p class="accroche">Trois livres arrivés cette semaine.</p>
    <p>Retrait gratuit en boutique.</p>
  </main>
</body>
</html>

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

main p {
  color: #1f3a68;
}

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

p {
  color: #222;
}

Le paragraphe accroche est concerné par les trois règles. Il s'affiche en ocre foncé : la règle .accroche l'emporte, bien qu'elle ne soit ni la première ni la dernière. Le second paragraphe, qui n'a pas de classe, est bleu nuit : main p l'emporte sur p, pourtant écrite après elle. L'ordre d'écriture n'est donc pas le premier critère.

Dans l'exemple, les trois règles ont la même origine (la feuille de l'auteur), aucune n'est importante, aucune n'est dans une couche : c'est la spécificité qui tranche. Les sections suivantes reprennent les critères un par un.

3.2 Origine et importance

Une page reçoit des déclarations de trois origines :

• le navigateur (user agent), avec sa feuille par défaut (chapitre 1) ;
• l'utilisateur, qui peut régler une taille de police minimale, des couleurs forcées, ou installer une feuille personnelle (une extension de lecture, par exemple) ;
• l'auteur de la page : nos feuilles, nos éléments <style> et nos attributs style.

Une déclaration suivie de !important est importante. L'importance renverse l'ordre des origines.

C'est pourquoi la moindre de nos règles remplace la feuille du navigateur : h1 { font-size: 40px; } l'emporte sur la règle par défaut font-size: 2em sans considération de spécificité, car elle appartient à une origine plus forte.

3.3 La spécificité