0Pricing
CSS Academy · Leçon

:nth-child et :nth-of-type

Sélectionnez les éléments selon leur position dans un parent à l’aide de formules nth et de sélecteurs de type.

:nth-child et :nth-of-type est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Que sont les pseudo-classes structurelles ?

Les pseudo-classes structurelles sélectionnent les éléments selon leur position au sein de leur parent. Elles évitent d’avoir à ajouter des classes ou du JavaScript pour cibler des éléments enfants précis.

:first-child et :last-child

Sélectionnez le premier ou le dernier enfant d’un parent :

<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>

Bases de :nth-child()

:nth-child(n) sélectionne les éléments selon leur position (indexée à partir de 1) parmi les éléments frères, quel que soit leur type.

<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>

:nth-child() avec des mots-clés

Utilisez le mot-clé odd ou even pour appliquer des styles alternés aux lignes :

<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>

:nth-child() avec des formules

Utilisez la formule An+B, où A représente le pas et B le décalage. n commence à 0 et s’incrémente.

  • 3n — un élément sur trois (3, 6, 9...)
  • 3n+1 — le premier de chaque groupe de trois (1, 4, 7...)
  • -n+3 — les trois premiers éléments uniquement
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

:nth-of-type()

:nth-of-type() compte uniquement les éléments frères du même type d’élément et ignore les autres. C’est important lorsque plusieurs types d’éléments sont mélangés.

<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>

:first-of-type et :last-of-type

Sélectionnez le premier ou le dernier élément d’un type de balise précis parmi les éléments frères :

<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />

:nth-child contre :nth-of-type

Différence essentielle :

  • p:nth-child(2) — sélectionne le deuxième enfant IF c’est un élément <p>
  • p:nth-of-type(2) — sélectionne le deuxième élément <p>, quels que soient les autres éléments

:only-child et :only-of-type

:only-child sélectionne un élément qui est l’unique enfant de son parent. :only-of-type sélectionne un élément qui est le seul de son type dans son parent.

<div><p>I'm the only child in this div.</p></div>

:nth-child avec le sélecteur S de of (moderne)

Les CSS modernes permettent de filtrer les éléments pris en compte par la formule nth à l’aide de :nth-child(An+B of selector) :

<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>

En pratique : espace de grille sur la dernière ligne

Supprimez la marge inférieure du dernier élément visible :

<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>

Vérification rapide

Quel sélecteur cible chaque troisième élément de liste en commençant par le premier ?

Récapitulatif

:nth-child() compte tous les éléments frères selon leur position ; :nth-of-type() compte uniquement les éléments frères de la même balise. Utilisez odd/even pour créer des tableaux à lignes alternées. La formule An+B permet de créer des motifs puissants comme « chaque troisième élément » ou « les cinq premiers » sans ajouter de classes.

Questions Fréquemment Posées

La leçon « :nth-child et :nth-of-type » est-elle gratuite ?

Oui — le texte complet de « :nth-child et :nth-of-type » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « :nth-child et :nth-of-type » ?

Sélectionnez les éléments selon leur position dans un parent à l’aide de formules nth et de sélecteurs de type. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « :nth-child et :nth-of-type » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. :hover :focus :active et :visited
  2. :nth-child et :nth-of-type
  3. :not() :is() et :where()
  4. :checked :disabled et pseudo-classes d’état des formulaires
← Retour à CSS Academy