:first-child

Aller à :
  1. Syntaxe
  2. Exemples
  3. Spécifications
  4. Compatibilité des navigateurs
  5. Voir aussi

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple4 Oui371 29.53.1
Matches elements with no parent57 ?52 ?44 ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui49.54 Oui
Matches elements with no parent5757 ?5244 ?7.0

1. Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.

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

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,