El selector :first-child es usado para seleccionar un selector especifico, únicamente el primer hijo de su padre. :first-child pertenece a CSS 2.1 y se encuentra soportado por los siguientes navegadores:

Pongamos un ejemplo sencillo de su uso. Imaginar que tenemos la siguiente estructura HTML:

<div id="contenedor">
    <h2>Titular</h2>
    <div class="grupo"><p>Grupo 1</p></div>
    <div class="grupo"><p>Grupo 2</p></div>
    <div class="grupo"><p>Grupo 3</p></div>       
</div>

:first-child nos permite seleccionar el primer hijo de un padre concreto por lo que una de nuestras posibilidades sería dar un estilo concreto al <h2> que es el primer hijo de “contenedor”. A continuación os muestro el ejemplo el cual funciona perfectamente en IE7+

#contenedor h2:first-child {background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Como se puede ver en el ejemplo hemos conseguido asignar unos estilos concretos al titular.

Un error muy común en el que se suele caer es intentar dar un estilo concreto al primer hijo de un tipo específico. Por ejemplo, pongamos que queremos dar un estilo concreto al primer contenedor “grupo” englobado bajo el contenedor padre “contenedor”

#contenedor2 grupo:first-child {background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Como podemos ver no hemos conseguido ningún resultado ya que .grupo no es el primer hijo del contenedor padre, tan solo es el primer hijo de un tipo concreto, lo cual no es valido.

Para solucionar este problema tenemos dos posibilidades:

1. Una primera más insegura pero soportada por los navegadores actuales sería mediante el uso de otro selector CSS 2.1 como es “+”
2. La segunda mediante el selector de CSS3 :first-of-type. Una opción más segura pero poco soportada por los navegadores actuales