01 — Sélecteurs & Spécificité

1. Tous les liens dans la navigation

.main-nav a { color: green; }

2. Uniquement le lien actif

.main-nav a.active { font-weight: bold; }

3. L'article avec la classe featured

article.post.featured { border: 2px solid green; }

4. Le premier paragraphe de chaque article

.post p:first-of-type { color: gray; }

5. Les éléments li pairs

li:nth-child(even) { background: #f0f0f0; }

p              → (0,0,1)
.text          → (0,1,0)
p.text         → (0,1,1)
#main          → (1,0,0)
#main .text p  → (1,1,1)

Même spécificité → laquelle gagne ?

La règle déclarée en dernier dans le CSS gagne.

Pourquoi éviter !important ?

Il court-circuite la cascade, rend le débogage difficile et force à empiler d'autres !important.