Chapitre 2 · Leçon 1
Comprendre pourquoi un style s'applique (ou pas)
Section 1
Step 1
La cascade détermine quel style s'applique quand plusieurs règles ciblent le même élément. L'ordre est : importance > spécificité > ordre source.
snippet.css
1/* Ordre d'application (du moins au plus prioritaire) :
2 1. Styles du navigateur (user-agent)
3 2. Styles externes (ta feuille CSS)
4 3. Styles inline (style="...")
5 4. !important (à éviter)
6*/
7
8p { color: gray; } /* spécificité: 0,0,1 */
9.intro { color: blue; } /* spécificité: 0,1,0 */
10#main p { color: red; } /* spécificité: 1,0,1 */Step 2
La spécificité se calcule en 3 colonnes (A, B, C). A = IDs, B = classes/attributs/pseudo-classes, C = éléments/pseudo-éléments. Plus le nombre est haut, plus la règle est prioritaire.
Section 2
Step 3
Les combinateurs permettent de cibler des éléments en fonction de leur relation avec d'autres éléments dans le DOM.
Step 4
Les pseudo-classes ciblent des états ou des positions dans le DOM sans ajouter de classes HTML.