Exercice 1 : Sélecteurs et spécificité (20 min)

1.1 Sélecteurs

Étant donné le HTML suivant, écrivez les sélecteurs CSS demandés :

<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>

Questions :

Sélectionnez tous les liens dans la navigation
Sélectionnez uniquement le lien actif
Sélectionnez l'article qui a la classe featured
Sélectionnez le premier paragraphe de chaque article
Sélectionnez les éléments <li> pairs

Solution :

    /* 1er question */
    .main-nav a {
        color: blue;
    }
    /* 2eme question */
    a:active {
        color: red;
    }
    /* 3eme question */
    .featured {
        background-color: #eee;
        padding: 20px;
        margin-top: 20px;
    }
    /* 4eme question */
    article p:first-child {
        font-size: 1.2em;
    }
    /* 5eme question */
    li:nth-of-type(even) {
        background-color: #eee;
    }

1.2 Spécificité

Questions :

Classez ces sélecteurs par spécificité croissante : p, .text, #main, p.text, #main .text p
Si deux règles ont la même spécificité, laquelle gagne ?
Pourquoi faut-il éviter !important ?

Correction :

Classement par spécificité croissante :
p (0,0,1) → .text (0,1,0) → p.text (0,1,1) → #main (1,0,0) → #main .text p (1,1,1)
En cas d'égalité de spécificité :
C'est la règle déclarée en dernier dans le CSS qui l'emporte (principe de la cascade).
Pourquoi éviter !important :
- Il court-circuite toute la cascade CSS et rend le code imprévisible.
- Il est difficile à surcharger : il faut un autre !important de spécificité plus haute.
- Il complique la maintenance et le débogage du CSS.
- Son usage excessif révèle souvent une mauvaise architecture CSS.