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

/* 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 4Edge Support complet OuiFirefox Support complet 3IE Support complet 7
Notes
Support complet 7
Notes
Notes Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Notes In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Support complet 9.5Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9.5Safari iOS Support complet 4Samsung Internet Android Support complet Oui
Matches elements with no parentChrome Support complet 57Edge ? Firefox Support complet 52IE ? Opera Support complet 44Safari ? WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile ? Firefox Android Support complet 52Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

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,