Exercice 1 - Sélecteurs et spécificité

1.1 Sélecteurs

HTML de référence :

<nav class="main-nav">
  <ul>
    <li><a href="/" class="active">Accueil</a></li>
    <li><a href="/about">À propos</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<main>
  <article class="post featured">
    <h2>Premier article</h2>
    <p>Contenu...</p>
  </article>
  <article class="post">
    <h2>Deuxième article</h2>
    <p>Contenu...</p>
  </article>
</main>

Demande	Sélecteur CSS
Tous les liens dans la navigation	`.main-nav a`
Uniquement le lien actif	`.main-nav a.active`
L'article ayant la classe featured	`article.post.featured`
Premier paragraphe de chaque article	`article.post p:first-of-type`
Éléments li pairs	`.main-nav li:nth-child(even)`

1.2 Spécificité

Classement par spécificité croissante

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

Questions théoriques

Si deux règles ont la même spécificité, la règle écrite en dernier dans la feuille CSS gagne.
Il faut éviter !important car il rend la maintenance difficile, casse la cascade naturelle et crée des conflits de priorité.