Pseudo Classe CSS :first-child

La pseudo-classe :first-child sélectionne l'élément s'il est le premier enfant parmis les autres éléments.

Le sélecteur :first-of-type peut être utilisé si l'utilisateur veut sélectionner et appliquer le style sur le premier paragraphe, qu'il s'agisse ou non du premier enfant.

Version

CSS2

Syntaxe

:first-child {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p:first-child {
      background-color: #1c87c9;
      color:#fff;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum est simplement du faux texte...</p>
    <h2>Exemple du sélecteur first-child</h2>
    <p>Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec le sélecteur :first-child:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li:first-child {
      background: #8ebf42;
      } 
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :first-child </h2>
    <ul>
      <li>Paris</li>
      <li>Moscou</li>
      <li>Rome</li>
    </ul>
    <ol>
      <li>Paris</li>
      <li>Moscou</li>
      <li>Rome</li>
    </ol>
  </body>
</html>