CSS - Pseudo-classe: primeiro filho

Descrição

A pseudoclasse: first-child é usada para adicionar um efeito especial a um elemento que é o primeiro filho de algum outro elemento.

Para fazer: o trabalho do primeiro filho no IE <! DOCTYPE> deve ser declarado no início do documento.

Observe que -

Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas.
As pseudoclasses são diferentes das classes CSS, mas podem ser combinadas.

Exemplo

Por exemplo, para indentar o primeiro parágrafo de todos os elementos <div>, você pode usar esta definição -

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

Isso produzirá o seguinte resultado -

↰ Previous page