CSS - Pseudo-clase: primer hijo

Descripción

La pseudoclase: first-child se utiliza para agregar un efecto especial a un elemento que es el primer hijo de algún otro elemento.

Para que: el primer hijo trabaje en IE <! DOCTYPE> debe declararse en la parte superior del documento.

Tenga en cuenta que -

Los nombres de pseudoclase no distinguen entre mayúsculas y minúsculas.
La pseudoclase es diferente de las clases CSS pero se pueden combinar.

Ejemplo

Por ejemplo, para sangrar el primer párrafo de todos los elementos <div>, puede usar esta definición:

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

Esto producirá el siguiente resultado:

↰ Previous page