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

Suponiendo el patrón E + F, el selector + permite seleccionar un elemento F que este inmediatamente precedido de un elemento E

Para nuestro ejemplo una manera de seleccionar el contenedor grupo mediante el uso de este selector sería la siguiente:

#contenedor3 h2 + .grupo{background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Este método puede resultar un tanto inseguro ya que en el momento en que cambiemos el HTML y grupo deje de ser adyacente a h2 perderá los estilos que le asignamos.

Un método más seguro pero poco soportado por los navegadores sería el uso del selector :first-of-type de CSS3. :first-of-type selecciona el primer elemento de un tipo específico.

Volviendo al ejemplo, podríamos hacer uso de este selector de la siguiente manera:

#contenedor4 .grupo:first-of-type{background-color: #809DA3; color: #FFF; border-bottom: 1px #FFF solid; margin-bottom: 5px;}

Solo la versión 9 de IE soporta selectores de CSS3 por lo que habrá que esperar un poco más para implementar esta opción.

• Puedes seguir cualquier respuesta a esta entrada mediante la fuente RSS 2.0.
• Puedes dejar un comentario o enviar un trackback desde tu propio sitio.