first-child, last-child, nth-child : les pseudo classes Position

first-child, last-child, nth-child : les pseudo classes Position

Publié le 24 mars 2018

Les pseudo classes Position permettent de cibler un élément enfant spécifique par rapport à son parent. Elles peuvent, par exemple, servir à mettre en avant un élément de votre barre de navigation, comme par exemple la mention « Contact » sur un fond de couleur ou alors alterner les couleurs de fond ou la typo dans une liste…. Les usages sont multiples.

Dans cet article, nous allons vous expliquer le fonctionnement global et vous pourrez ensuite utiliser ces pseudo classes Position sur les éléments de votre choix.

 

first-child

Le sélecteur :first-child permet de cibler le 1er élément par rapport à son parent. Prenons un exemple concret : nous avons un article, il contient plusieurs paragraphes. Nous voulons styler le 1er paragraphe différemment des autres : le 1er article sera écrit plus gros, en italique et en rose alors que les paragraphes suivants seront classiques.

<article>
  <p>First paragraph : Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>2nd paragraph : Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  <p>3rd paragraph : Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>

Plutôt que d’attribuer une classe au 1er paragraphe, nous allons utiliser le sélecteur :first-child. Dans votre css, il suffit de copier :

p:first-child {
  font-size: 1.5em;
  font-weight: 700;
}

Résultat :
Yes You Web - pseudos classes position

Subtilité : first-child / :first-of-type

Vous avez peut-être déjà vu le sélecteur :first-of-type. A votre avis, quelle est la différence entre :first-child et :first-of-type ? Ces 2 sélecteurs sont très proches mais il y a une différence importante entre les 2 : first-child est moins spécifique que son confrère.

  • :first-child va seulement essayer de s’appliquer au 1er enfant du parent.
  • :first-of-type va s’appliquer à la 1ère occurence d’un élément spécifique, même s’il ne vient pas en 1er dans le code html. Dans l’exemple ci-dessus, le résultat serait le même parce que le 1er élément enfant de l’article est aussi l’élément paragraphe.

La puissance de :first-child: est de pouvoir identifier un élément par rapport aux autres éléments et pas seulement aux éléments du même type.

 

last-child

Le sélecteur :last-child permet de cibler le dernier élément par rapport à son parent. Prenons un exemple concret : nous avons une navigation avec plusieurs éléments de menu et nous souhaitons que le dernier élément ressorte davantage, l’élément Contact dans notre exemple.

<ul>
<li>A propos</li>
<li>Services</li>
<li>Références</li>
<li>Actualités</li>
<li>Contact</li>
</ul>

Plutôt que d’attribuer une classe au dernier li, ce qui n’est pas toujours possible, surtout quand vous travaillez avec un thème WordPress, nous allons utiliser le sélecteur :last-child. Dans votre css, il suffit de copier :

ul li:last-child {
    background-color: #e50a47;
    padding: 5px 10px;
    color: white;
}

Résultat :
Yes You Web - pseudos classes position

 

nth-child

Le sélecteur :nth-child permet de sélectionner un ou plusieurs éléments enfants selon leur rang. Prenons l’exemple d’une liste horizontale.

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

nth-child va nous permettre de sélectionner les éléments pairs, les éléments impairs, les 5 premiers, les 2 derniers… On fait tout ce qu’on veut en fait. Nous allons voir les principaux usages :

Eléments pairs et impairs

Retenez qu’en anglais, « even » signifie « pair » et « odd » signifie impair. C’est ce que nous allons utiliser ici.

ul li:nth-child(even) { 
	color: #e6007e;
}
Sélection des éléments pairs

Yes You Web - pseudos classes position

ul li:nth-child(odd) { 
	color: #e6007e;
}
Sélection des éléments impairs

Yes You Web - pseudos classes position

5 premiers / derniers

ul li:nth-child(-n+5) { 
	color: #e6007e;
}
Sélection des 5 premiers éléments

Yes You Web - pseudos classes position

ul li:nth-child(n+6) { 
	color: #e6007e;
}
Sélection des 5 derniers éléments

6è élément

ul li:nth-child(6) { 
	color: #e6007e;
}
Sélection du 6è élément

Yes You Web - pseudos classes position

Avant dernier élément

ul li:nth-last-child(2) { 
	color: #e6007e;
}
Sélection de l'avant dernier élément

Yes You Web - pseudos classes position

Tous les 4 éléments en commençant par le 1er

ul li:nth-child(4n-7) { 
	color: #e6007e;
}
Sélection tous les 4 éléments

Yes You Web - pseudos classes position

Pour aller plus loin

La pseudo-classe s’écrit réellement :nth-child(an+b) et « n » est le point de départ de notre suite. Prenons quelques exemples :
Il faut comprendre que 3n est « 3xn », l’expression complète est « (3xn)+3 ». Maintenant substituons les valaurs de « n » depuis le 0, nous obtenons :

  • (3 x 0) + 3 = 3 = 3è élement
  • (3 x 1) + 3 = 6 = 6è élement
  • (3 x 2) + 3 = 9 = 9è élement

Voici un petit tableau bien pratique pour mieux comprendre tout ça :
Yes You Web - pseudos classes position

Conclusion

Voilà, nous espérons que cet article vous permettra de styler vos sites avec les pseudo classes Position. Si vous voulez voir quelles autres pseudo classes existent, consultez notre article sur le sujet : Comprendre les pseudos classes en CSS
Si cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. Et n’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

2 Avis

  1. Yop,

    Pour faire suite à la partie « Tous les 4 éléments en commençant par le 1er » on peut aussi ajouter tous les 4 éléments (par exemple) ainsi :

    :nth-child(4n-4)

    Utile pour faire faire un clear:left ou autre au n4ème element par exemple 😉

    Merci pour tes supers articles !

    Keep up the good work ^^

    • Auteur
      Marine LE GUERNIGOU 8 mois ll y a

      Merci Vince 🙂

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.