1.1
Sélecteurs CSS
Ciblage précis des éléments HTML
⏱ 10 min
SOLUTION CSS
.main-nav a {
/* sélecteur descendant — tous les <a> dans .main-nav */
color: #333;
}
SOLUTION CSS
.main-nav a.active {
/* <a> ayant la classe active dans .main-nav */
font-weight: bold;
color: #007bff;
}
SOLUTION CSS
article.post.featured {
/* <article> avec DEUX classes : post ET featured */
border: 2px solid gold;
background: #fffbea;
}
À noter : Chaîner les classes sans espace (.post.featured ) signifie que l'élément doit posséder les deux classes simultanément. Avec un espace (.post .featured ), on ciblerait un descendant.
SOLUTION CSS
article.post p:first-of-type {
/* premier <p> de chaque article */
font-size: 1.05em;
color: #444;
}
SOLUTION CSS
li:nth-child(even) {
/* 2e, 4e, 6e... enfants */
background: #f5f5f5;
}
/* Équivalent : */
li:nth-child(2n) { background: #f5f5f5; }
1.2
Spécificité
Calcul de la cascade CSS
⏱ 10 min
TABLEAU DE SPÉCIFICITÉ
| Ordre | Sélecteur | IDs | Classes | Éléments | Score |
|---|---|---|---|---|---|
| 1 | 0 | 0 | 1 | (0,0,0,1) | |
| 2 | 0 | 1 | 0 | (0,0,1,0) | |
| 3 | 0 | 1 | 1 | (0,0,1,1) | |
| 4 | 1 | 0 | 0 | (0,1,0,0) | |
| 5 | 1 | 1 | 1 | (0,1,1,1) |
Ordre croissant : p → .text → p.text → #main → #main .text p
RÉPONSE
Lorsque deux règles ont la même spécificité, c'est la règle déclarée en dernier dans le CSS qui l'emporte (principe de la cascade : ordre d'apparition).
RÉPONSE
- Brise la cascade : court-circuite l'algorithme de spécificité.
- Maintenance difficile : pour surcharger un
!important , il faut en écrire un autre → spirale infernale. - Débogage complexe : difficile de tracer la source réelle de la valeur.
- Alternative saine : augmenter la spécificité du sélecteur ou restructurer les règles.