:first-child

Le sélecteur :first-child vous permet de cibler le premier élément immédiatement à l'intérieur d'un autre élément. Il est défini dans la spécification CSS niveau 3 comme une pseudo-classe structurelle, ce qui signifie qu'il est utilisé pour appliquer un style à du contenu en fonction de sa relation avec le contenu de ses parent et frères.

Admettons que nous avons un article et que nous voulions donner plus d'importance au premier paragraphe, comme s'il était une sorte de texte d'intro. :

//HTML
<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

Plutôt que de lui donner une classe (par exemple .premier), nous pouvons utiliser :first-child pour le sélectionner :

//CSS
p:first-child {
  font-size: 1.5em;
}

L'utilisation de :first-child est assez proche de celle de :first-of-type, mais avec une différence essentielle : il est moins spécifique. :first-child essaiera seulement de trouver le premier enfant d'un élément parent, alors que :first-of-type cherchera la première occurrence d'un élément spécifié, m^me s'il n'est pas le premier dans l'ordre des éléments HTML. Dans l'exemple qui précède, le résultat serait le même, mais uniquement parce que le premier enfant de l'article se trouve être le premier élément p. Cela montre la puissance de :first-child : il peut identifier un élément en relation avec tous ses frères, et non pas seulement en relation avec ses frères du même type.

L'exemple qui suit est un peu plus complexe et illustre l'utilisation de :first-child et de la pseudo-classe jumelle :last-child.

See the Pen CSS-Tricks: :first-child and :last-child by Zachary Kain (@zakkain) on CodePen.


À lire également dans La Cascade :

Combinateurs et pseudo-classes, de Steven Bradley

Autres ressources à consulter sur ce sujet :


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.