CSS - Pseudo-classe: premier enfant

La description

La pseudo-classe : first-child est utilisée pour ajouter un effet spécial à un élément qui est le premier enfant d'un autre élément.

Pour faire: le travail du premier enfant dans IE <! DOCTYPE> doit être déclaré en haut du document.

Veuillez noter que -

  • Les noms de pseudo-classes ne sont pas sensibles à la casse.

  • Les pseudo-classes sont différentes des classes CSS mais elles peuvent être combinées.

Exemple

Par exemple, pour mettre en retrait le premier paragraphe de tous les éléments <div>, vous pouvez utiliser cette définition -

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>
   
   <body>
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be  indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div.This paragraph will not be effected.</p>
      </div>
   </body>
</html>

Cela produira le résultat suivant -