Module 1Les bases du CSS
Chapitre 3 sur 15
Cascade, héritage et spécificité
Comprendre quelle règle l'emporte : cascade, spécificité, héritage et !important.
- ≈ 150 min
- 6 leçons
- 1 vidéo
- 3 exercices
Module 1Les bases du CSS
Chapitre 3 sur 15
Comprendre quelle règle l'emporte : cascade, spécificité, héritage et !important.
Objectifs
Avec ce chapitre, tu sauras…
inherit, initial, unset ;!important est presque toujours une mauvaise idée.« J'ai écrit color: red et mon texte reste bleu ! » Tous les débutants en CSS vivent ce moment. La réponse est toujours la même : une autre règle a gagné. Ce chapitre t'explique les règles du jeu. C'est le chapitre le plus théorique de la formation, et celui qui t'épargnera le plus d'heures de frustration.
Leçon 1
<p class="alerte" id="info">Attention : la séance commence à 9 h.</p>#info { color: green; }
.alerte { color: red; }
p { color: blue; }Les trois règles ciblent le même paragraphe et donnent trois couleurs différentes. Le texte sera vert. Pour comprendre pourquoi, il faut connaître l'algorithme de la cascade.
Les critères de la cascade, dans l'ordre
!important passent devant ; ton CSS passe devant les styles par défaut du navigateur.id bat une classe, une classe bat une balise.Vidéo · À regarder
FRCascade, spécificité et héritage en CSS !
École du Web · YouTube
Leçon 2
| Sélecteur | A (id) | B (classes…) | C (balises…) | Spécificité |
|---|---|---|---|---|
p | 0 | 0 | 1 | (0, 0, 1) |
nav a | 0 |
Leçon 3
Leçon 4
| Héritées (le texte, en général) | Non héritées (la boîte, en général) |
|---|---|
color | margin, padding |
font-family, font-size, font-weight | border, border-radius |
line-height, letter-spacing | background-color, background-image |
text-align, text-transform | width, height |
Leçon 5
Leçon 6
1Quel sélecteur est le plus spécifique ?
2La spécificité de ul li.actif a est…
3À spécificité égale, quelle règle gagne ?
4Laquelle de ces propriétés est héritée ?
5a { color: inherit; } donne aux liens…
6!important…
L'essentiel du chapitre
inherit, initial, unset, revert. !important : dernier recours.| 0 |
| 2 |
| (0, 0, 2) |
.alerte | 0 | 1 | 0 | (0, 1, 0) |
p.alerte | 0 | 1 | 1 | (0, 1, 1) |
a:hover | 0 | 1 | 1 | (0, 1, 1) |
.menu li a | 0 | 1 | 2 | (0, 1, 2) |
input[type="email"] | 0 | 1 | 1 | (0, 1, 1) |
#info | 1 | 0 | 0 | (1, 0, 0) |
#menu .lien:hover | 1 | 2 | 0 | (1, 2, 0) |
style="..." (en ligne) | — | — | — | bat tous les sélecteurs |
list-style |
display, position |
visibility, cursor | box-shadow, overflow |
| Valeur | Effet |
|---|---|
inherit | force l'héritage de la valeur du parent : a { color: inherit; } |
initial | remet la valeur initiale de la spécification (par exemple black pour color) |
unset | inherit si la propriété est héritée, sinon initial |
revert | revient au style par défaut du navigateur |
Une vidéo française entièrement consacrée à ce chapitre : cascade, spécificité et héritage. Regarde-la en entier après avoir lu les sections 2 à 4, puis refais les exemples.
On compte trois nombres, écrits (A, B, C) :
#id) ;[type]) et pseudo-classes (:hover) ;p) et de pseudo-éléments (::before).On compare d'abord A ; si égalité, B ; si égalité, C. Le sélecteur universel * et les combinateurs (>, +, espace) ne comptent pas.
Tableau: Exemples de calcul
À spécificité égale, la dernière règle lue l'emporte. Cela vaut à l'intérieur d'un fichier, mais aussi entre plusieurs fichiers : le fichier relié en dernier dans le <head> gagne.
.bouton { background-color: blue; }
/* ... 200 lignes plus loin ... */
.bouton { background-color: green; } /* le bouton est vert */Si tu utilises une bibliothèque comme Bootstrap, relie son fichier avant le tien dans le <head>. Sinon, à spécificité égale, ce sont ses styles qui écrasent les tiens.
Certaines propriétés, définies sur un élément, sont transmises automatiquement à ses descendants. C'est l'héritage. Il explique pourquoi body { font-family: Arial; } change la police de toute la page.
Tableau: Hérité ou pas ?
.texte { color: red !important; }!important fait passer une déclaration devant toutes les autres, quelle que soit la spécificité. Le seul moyen de la battre est un autre !important plus spécifique ou écrit plus tard.
Tu ajoutes un !important pour corriger un problème. Plus tard, une autre règle doit l'emporter : tu ajoutes un autre !important… Après quelques mois, le CSS devient impossible à maintenir. Si tu as besoin de !important, c'est souvent le signe d'un sélecteur trop spécifique ailleurs : corrige la cause. Usages acceptables : surcharger un style externe que tu ne contrôles pas, ou des classes utilitaires (.cache { display: none !important; }).
En entreprise, on cherche à garder une spécificité basse et uniforme : presque uniquement des classes, rarement plus de deux niveaux (.carte .titre), jamais d'id en CSS. C'est le principe de méthodes comme BEM (chapitre 13). Un CSS à spécificité basse est un CSS facile à faire évoluer.
On écrit section { color: navy; border: 2px solid navy; font-family: Georgia; }. La section contient un h2 et un p. Quelles propriétés le h2 et le p reçoivent-ils ? Que faut-il écrire pour que les liens de la section aient la même couleur que le texte ?
Donne la spécificité (A, B, C) de : (a) h1 ; (b) header nav ul li a ; (c) .carte .titre ; (d) #panier .article:hover ; (e) a[href$=".pdf"]::after ; (f) button.primaire:not(.desactive). Range-les du plus faible au plus fort.
Pour chaque cas, donne la couleur finale du texte du paragraphe <p class="intro" id="haut">, et justifie.
/* Cas 1 */
p.intro { color: blue; }
.intro { color: red; }
/* Cas 2 */
.intro { color: red; }
.intro { color: green; }
/* Cas 3 */
#haut { color: purple; }
p.intro { color: orange !important; }
/* Cas 4 */
body { color: gray; }
/* aucune autre règle sur p */Ce n'est pas un nombre qu'on additionne : une seule classe bat cent balises, et un seul id bat cent classes. (0, 1, 0) est plus fort que (0, 0, 12). Pense aux médailles des Jeux olympiques : un pays avec 1 médaille d'or est devant un pays avec 30 médailles d'argent.
Retour à l'exemple : #info (1, 0, 0) bat .alerte (0, 1, 0), qui bat p (0, 0, 1). Le texte est vert.
:not(.x) et :is(.a, .b) prennent la spécificité de leur argument le plus spécifique. :where(...) a toujours une spécificité de zéro : c'est très pratique pour écrire des styles de base faciles à surcharger.
Les propriétés qui concernent le texte s'héritent ; celles qui concernent la boîte ne s'héritent pas. Imagine le contraire : si border s'héritait, mettre une bordure au body encadrerait chaque paragraphe, chaque lien, chaque mot en gras…
Une valeur héritée perd contre n'importe quelle règle qui cible directement l'élément, même la moins spécifique, y compris les styles par défaut du navigateur. C'est pour cela que les liens restent bleus alors que tu as écrit body { color: black; } : le navigateur cible directement a avec sa propre couleur.
Tableau: Les mots-clés universels