SummArg | Cursos y recursos para webmasters

11/02/2012

Qué son y para qué sirven las pseudo-clases :first-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. La pseudo-clase mas conocida es :hover, que nos permite cambiar el estilo de un link cuando el puntero del mouse pasa por arriba del mismo.

Los selectores :first-child y :last-child existen a partir de CSS2.1, por lo que funcionan en todos los navegadores, y tienen por finalidad 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 otra cosa. Nosotros utilizaremos una lista desordenada para demostrar el funcionamiento.

<div id="navigation">
 <ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">6</a></li>
 <li><a href="#">7</a></li>
 <li><a href="#">8</a></li>
 <li><a href="#">9</a></li>
 <li><a href="#">10</a></li>
 </ul>
 </div>

Ahora en nuestro CSS le daremos a todos los botones un color gris, como para empezar con algo.

#navigation ul {
 list-style-type:none;
 height: 37px;
 margin: 10px 0 0 0;
 float:right;
 }
#navigation ul li {
 padding: 8px 15px;
 display:block;
 float:left;
 background-color: #e1e1e1;
 margin: 0 1px;
 }
#navigation ul li a {
 color:white;
 text-decoration:none;
 font-size:16px;
 text-transform: uppercase;
 font-weight:bold;
 }

Ahora aplicaremos un estilo diferente al primer y al último hijo con :first-child y :last-child.

#navigation ul li:first-child {
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 0px;
 -moz-border-radius-bottomleft: 5px;
 -webkit-border-radius: 0px 0px 0px 5px;
 border-radius: 0px 0px 0px 5px;
 background-color: #445574 ;
 }
#navigation ul li:last-child {
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 0px;
 -webkit-border-radius: 0px 0px 5px 0px;
 border-radius: 0px 0px 5px 0px;
 background-color: #b1c3e5 ;
 }

Genial! No? Sin tocar nuestro HTML y sólo desde nuestro CSS ya logramos introducir cambios interesantes en nuestra lista. Ahora veamos que otros cambios podemos introducir.

:nth-child pertenece a CSS3 y nos permite aplicar reglas mas complejas. Su forma mas simple es colocando el número de hijo entre paréntesis de este modo :nth-child(n), en donde n es el número de hijo. Eliminemos la propiedad background-color de nuestro :first-child y :last-child para que se vean en color gris y vamos a añadir colores a los hijos 3, 4, 5, 6 y 7 de nuestro listado.

#navigation ul li:nth-child(3) {
 background-color: #445574 ;
 }
 #navigation ul li:nth-child(4) {
 background-color: #5a719c ;
 }
 #navigation ul li:nth-child(5) {
 background-color: #6f88b7 ;
 }
 #navigation ul li:nth-child(6) {
 background-color: #8da5d1;
 }
 #navigation ul li:nth-child(7) {
 background-color: #b1c3e5 ;
 }

Seleccionar todos los impares.

#navigation ul li:nth-child(2n+1) {
background-color: #445574 ;
}

También puede escribirse:

#navigation ul li:nth-child(odd) {
background-color: #445574 ;
}

Seleccionar los pares.

#navigation ul li:nth-child(2n) {
background-color: #445574 ;
}

o también

#navigation ul li:nth-child(even) {
background-color: #445574 ;
}

Podemos seleccionar los primeros 5 elementos.

#navigation ul li:nth-child(-n+5) {
background-color: #445574 ;
}

Seleccionar cada 3 elementos empezando por el primero.

#navigation ul li:nth-child(3n+1) {
background-color: #445574 ;
}

Seleccionar el anteúltimo elemento (contar el segundo desde atrás).

#navigation ul li:nth-last-child(2) {
background-color: #445574 ;
}

Finalmente una aclaración. Existe una pseudo-clase llamada :nth-of-type con características similares a :nth-child. La diferencia radica en que :nth-child se aplica a cualquier hijo dentro de un contenedor, no importa si es <li>, <p>, <div>. En cambio :nth-of-type sirve para seleccionar a los hijos de una determinada etiqueta.

Ejemplo.

<div>
<h2>Un título importante</h2>
<p>Hay sol</p>
<p>Hace calor</p>
</div>

Si colocamos:

p:nth-child(2) { color: red; }

Entonces “Hay sol” cambiará al color rojo porque cuenta al segundo elemento hijo sin importar su etiqueta.

Si en cambio colocamos :

p:nth-of-type(2) { color: red; }

Entonces “Hace calor” se verá en rojo, ya que cuenta al segundo elemento <p>, respetando el tipo de elemento a incluir en el conteo.

 

Dejar un comentario

  1. genial el tutorial, muchas gracias

  2. Ignacio A.

    Me fue de gran ayuda, muchas gracias!.

  3. Joe Miranda

    Me encanto el tutorial,lo entendi a la primera :D, muchisimas gracias.

  4. Buen tutorial, gracias.

Dejar un comentario