:first-child

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent. En CSS3, l'élément devait avoir un parent, cette restriction a été levée avec CSS4.

/* Cible n'importe quel élément <p> qui est */
/* le premier fils de son élément parent */
p:first-child {
  color: lime;
  background-color: black;
}

Note : Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.

Syntaxe

:first-child

Exemples

Premier exemple

CSS

p:first-child {
  color: lime;
  background-color: black; 
  padding: 5px;
}

HTML

<div>
  <p>Ce paragraphe est mis en forme car c'est un élément
     p ET que c'est le premier fils de l'élément div.</p>
  <p>En revanche, ce paragraphe n'est pas mis en forme
     car ce n'est pas le premier !</p>
</div>

<div>
  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
      un paragraphe.</h2>
  <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
     le premier fils !</p>
</div>

Résultat

Utiliser les listes non ordonnées

CSS

li{
  color:blue;
}
li:first-child{
  color:green;
}

HTML

<ul>
  <li>Élément 1 de la liste</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':first-child' dans cette spécification.		 Version de travail Les éléments correspondants ne doivent pas avoir nécessairement de parent.
Selectors Level 3
La définition de ':first-child' dans cette spécification.		 Recommendation Aucune modification.
CSS Level 2 (Revision 1)
La définition de ':first-child' dans cette spécification.		 Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 4.0 (Oui) 3.0 (1.9) 7[1] 9.5 4
Pas d'élément parent nécessaire 57 ? 51 (51)[2 ? 44 ?
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) 1.0 (1.9.1) 7[1] 10 3.1
Pas d'élément parent nécessaire 57 57 51 (51)[2 ? ? 44 ?

[1] Internet Explorer 7 ne met pas à jour la mise en forme lorsque les éléments sont ajoutés dynamiquement. Pour Internet Explorer 8, si un élément est inséré dynamiquement lors d'un clic sur un lien, la mise en forme n'est pas appliquée tant que le lien a le focus.

[2] Cf. bug 1300374

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, dohzya, tregagnon, FredB, ThePrisoner, Fredchat
 Dernière mise à jour par : SphinxKnight,