Exercice 1 : Sélecteurs et spécificité

1. Sélectionnez tous les liens dans la navigation

.main-nav a { }

2. Sélectionnez uniquement le lien actif

.main-nav a.active { }

3. Sélectionnez l'article qui a la classe featured

.post.featured { }

4. Sélectionnez le premier paragraphe de chaque article

article p:first-of-type { }

5. Sélectionnez les éléments <li> pairs

li:nth-child(2n) { }

Spécificité

Classement :

p              -> 0-0-1
.text          -> 0-1-0
p.text         -> 0-1-1
#main          -> 1-0-0
#main .text p  -> 1-1-1
  

Si deux règles ont la même spécificité, laquelle gagne ?

La dernière règle écrite gagne grâce à la cascade CSS

Pourquoi faut-il éviter !important ?

!important casse la logique de la cascade, rend le code difficile à maintenir et doit être évité sauf cas exceptionnel.