Comprends comment la cascade CSS décide quels styles gagnent lorsque plusieurs règles ciblent le même élément. Apprends à calculer la spécificité et à l'utiliser à ton avantage.
Lorsque plusieurs règles CSS ciblent le même élément, le navigateur doit décider quelle déclaration gagne. Ce processus de décision s'appelle la cascade, et il suit un ordre de priorité strict :
!important.Comprendre la cascade est la clé pour déboguer le CSS. Lorsqu'un style ne s'applique pas comme prévu, la réponse est presque toujours qu'une autre règle avec une spécificité plus élevée ou un ordre d'apparition ultérieur l'écrase.
La spécificité est calculée comme un score en trois parties, souvent écrit comme (A, B, C) :
| Composant | Ce qui compte | Exemple |
|---|---|---|
| A — Sélecteurs d'ID | Chaque #id ajoute 1 | #header = (1, 0, 0) |
| B — Sélecteurs de classe, sélecteurs d'attribut, pseudo-classes | Chaque .class, [attr], :hover ajoute 1 | .nav.active = (0, 2, 0) |
| C — Sélecteurs d'élément, pseudo-éléments | Chaque div, ::before ajoute 1 | ul li a = (0, 0, 3) |
Les styles en ligne (l'attribut style sur un élément) battent toutes les règles basées sur des sélecteurs. Et !important écrase tout, y compris les styles en ligne.
p = (0, 0, 1).card = (0, 1, 0)#main .card p = (1, 1, 1)div.container > ul li.active a:hover = (0, 3, 3)Un seul sélecteur d'ID (1, 0, 0) bat toujours n'importe quel nombre de classes (0, N, 0) car la colonne A est comparée en premier.
<style>
/* Specificity: (0, 0, 1) */
p {
color: black;
}
/* Specificity: (0, 1, 0) — wins over element selector */
.highlight {
color: orange;
}
/* Specificity: (1, 0, 0) — wins over class selector */
#special {
color: red;
}
/* Even 3 classes (0, 3, 0) cannot beat 1 ID (1, 0, 0) */
.container .highlight .text {
color: green;
}
</style>
<div class="container">
<p class="highlight text" id="special">
What color am I? (Answer: red)
</p>
</div>Quel sélecteur a la spécificité la plus élevée ?