Exercice 1

Sélecteurs et spécificité

1.1 Sélecteurs :

HTML
                    
                        <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>
✔️Question 1 :

Sélection de tous les liens dans la navigation:


✔️Question 2 :

Sélection du lien actif:


✔️Question 3 :

Sélection d'article qui a la classe featured:


✔️Question 4 :

Sélection du premier paragraphe de chaque article:


✔️Question 5 :

Sélection des <li> pairs:


1.2 Spécifité :

✔️Question 1 :

Classement des sélecteurs par spécifité croissante:

  1. p➡️(0,0,1)
  2. .text➡️(0,1,0)
  3. p.text➡️(0,1,1)
  4. #main➡️(1,0,0)
  5. #main .text p➡️(1,1,1)
✔️Question 2 :

Cas ou deux règles ont la même spécifité:

📌Régle de la "Cascade" : Le navigateur lit le fichier css de haut en bas, comme une liste d'instructions. S'il rencontre deux ordres contradictoires avec la même force, il applique le plus récent (celui du bas).


✔️Question 3 :

Evitation de !important:

⚠️Avec !important on casse la "Cascade".Quand on utilise !important, on dit au navigateur : "Oublie toutes les règles de priorité, celle-ci gagne quoi qu'il arrive".