Firt-child, last-child y nth-child

Las pseudo-clases son selectores que nos permiten añadir diferentes estilos a un mismo elemento dependiendo de determinadas condiciones. Amplían nuestras posibilidades sin necesidad de modificar el código HTML.

Los selectores :first-child y :last-child existen a partir de CSS2.1, por lo que funcionan en todos los navegadores, y tienen como función permitirnos dar estilo al primer hijo y al último respectivamente. Esto se puede aplicar a los párrafos de un texto, a links o a cualquier otro elemento HTML.

En el ejemplo que vamos a ilustrar utilizaremos una lista desordenada para demostrar el funcionamiento. Vamos a crear un menú sencillo donde daremos diferentes estilos al primero, al último y a cualquier otro.

Vamos a crear el siguiente menú de ejemplo:

<ul id="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Categorías</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Soporte técnico</a></li>
    <li><a href="#">Contacto</a></li>
</ul>

Y le vamos a dar el siguiente estilo sencillo utilizando los selectores que estamos comentando:

Como puedes observar, le estamos dando un estilo diferente (background) al primer elemento del menú, al último y a otro seleccionado. Esto lo conseguimos añadiendo lo siguiente en nuestra hoja de estilos:

#menu li:first-child {
    background-color:#FF9900;
}

#menu li:last-child {
    background-color: #0099CC;
}

#menu li:nth-child(3) {
    background-color: #00CC00;
}

Las posiblidades son múltiples.

Ver el ejemplo en funcionamiento