Exercice 1 – Sélecteurs et spécificité

1.1 Sélecteurs

/* Sélectionnez tous les liens dans la navigation */ .main-nav a { color: blue; } /* Sélectionnez uniquement le lien actif */ .main-nav a.active { background-color: blue; color: white; } /* Sélectionnez l'article qui a la classe featured */ article.featured { border: 2px solid orange; } /* Sélectionnez le premier paragraphe de chaque article */ article p:first-of-type { font-weight: bold; } /* Sélectionnez les éléments <li> pairs */ li:nth-child(even) { background-color: lightgray; }

DÉMONSTRATION

Premier article

Contenu du premier paragraphe .

Contenu du deuxième paragraphe .

Deuxième article

Contenu du premier paragraphe .

Contenu du deuxième paragraphe .

1.2 Spécificité

/* Classez ces sélecteurs par spécificité croissante : p, .text, #main, p.text, #main .text p */ p < .text < p.text < #main < #main .text p /* Si deux règles ont la même spécificité, laquelle gagne ? */ La dernière règle déclarée dans le code CSS gagne. /* Pourquoi faut-il éviter !important ? */ Il casse la cascade CSS, rendant la surcharge des styles très difficile et générant une dette technique compliquée à maintenir.