Adloun

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

Calculer nth-child

Sélecteurs · niveau 2

Énoncé

Une liste contient 12 éléments <li>. Quels éléments chaque sélecteur désigne-t-il ?

  • li:nth-child(2n)
  • li:nth-child(2n+3)
  • li:nth-child(4n-1)
  • li:nth-child(-n+4)
  • li:nth-child(n+4):nth-child(-n+8)
  • li:nth-last-child(-n+3)

Écrire enfin un sélecteur pour « un élément sur cinq, en commençant par le cinquième ».

Corrigé

  • 2n : (écarté), .
  • 2n+3 : — les impairs à partir du troisième.
  • 4n-1 : donne (écarté), puis .
  • -n+4 : — les quatre premiers.
  • n+4 garde à , -n+8 garde à ; les deux à la fois : .
  • :nth-last-child(-n+3) : les trois derniers, .

Un sur cinq à partir du cinquième : li:nth-child(5n) (). Tous ces résultats ont été vérifiés dans Chromium.

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 →