CSS - Pseudo-classe: primo figlio

Descrizione

La pseudo-classe : first-child viene utilizzata per aggiungere un effetto speciale a un elemento che è il primo figlio di qualche altro elemento.

Per fare: il lavoro del primo figlio in IE <! DOCTYPE> deve essere dichiarato all'inizio del documento.

Si prega di notare che -

  • I nomi delle pseudo classi non fanno distinzione tra maiuscole e minuscole.

  • Le pseudo-classi sono diverse dalle classi CSS ma possono essere combinate.

Esempio

Ad esempio, per far rientrare il primo paragrafo di tutti gli elementi <div>, potresti usare questa definizione:

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

Questo produrrà il seguente risultato: