CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Application directe du cours

Calculer des spécificités

Cascade, spécificité et héritage · niveau 1 (application)

Énoncé

Calculer la spécificité de chaque sélecteur, puis les classer du plus faible au plus fort. Tous désignent le lien de ce menu :


  <header>
    <nav id="principal" class="menu" aria-label="Navigation principale">
      <ul>
        <li><a class="menu-lien actif" href="plan.pdf">Plan d’accès</a></li>
      </ul>
    </nav>
  </header>

a
nav a
.menu-lien
a.menu-lien.actif
#principal a
li:first-child > a
a:not(#principal)
:where(.menu) a[href$=".pdf"]
header :is(.menu, nav) a
nav:has(.actif) a::after

Corrigé

Sélecteur	$(a, b, c)$	Remarque
`a`	$(0, 0, 1)$
`nav a`	$(0, 0, 2)$
`.menu-lien`	$(0, 1, 0)$
`a.menu-lien.actif`	$(0, 2, 1)$
`#principal a`	$(1, 0, 1)$
`li:first-child > a`	$(0, 1, 2)$
`a:not(#principal)`	$(1, 0, 1)$	l'argument compte
`:where(.menu) a[href$=".pdf"]`	$(0, 1, 1)$	seul l'attribut compte
`header :is(.menu, nav) a`	$(0, 1, 2)$	`.menu` est le plus fort
`nav:has(.actif) a::after`	$(0, 1, 3)$	pseudo-élément en $c$

Du plus faible au plus fort :

a ;
nav a ;
.menu-lien ;
:where(.menu) a[href$=".pdf"] ;
li:first-child > a et header :is(.menu, nav) a, à égalité ;
nav:has(.actif) a::after ;
a.menu-lien.actif ;
#principal a et a:not(#principal), à égalité.

Ces valeurs sont celles que donne Chromium. Le dernier sélecteur ne vise d'ailleurs pas le lien lui-même mais son pseudo-élément ::after : il n'entre en concurrence qu'avec d'autres règles ::after.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →