La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

Syntaxe

:first-child { style properties }

Exemples

Premier exemple

CSS

span:first-child {
    background-color: lime;
}

HTML

<div>
  <span>Ce &lt;span&gt; est vert !</span>
  <span>Mais pas celui-là :(</span>
</div>

Résultat

Utiliser les listes non ordonnées

CSS

li{
  color:red;
}
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 Aucune modification.
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 Firefox (Gecko) Internet Explorer Opera Safari
Support simple 4.0 3.0 (1.9) 7[1] 9.5 4
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

[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.

Voir aussi

Étiquettes et contributeurs liés au document

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