La pseudo-clase nth-child

Una de las novedades menos conocidas del futuro CSS3 son las pseudo-clases que se van sumando a las existentes.

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de dato especial y tal vez, la más conocida es :hover [ 1 2 3 ]

Hay una en particular llamada nth-child que jamá había escuchado nombrar y me ha maravillado. Lamentablemente, no funciona en Internet Explorer aunque lo hace en el resto de los navegadores modernos: Firefox 3.5, Safari, Opera y Chrome.

Lo que hace es identificar un elemento dentro de una lista de etiquetas. Por ejemplo, si pusiéramos una serie de párrafos dentro de un DIV:

<div id="ejemplo">
  <p> [ PARRAFO 1 ] </p>
  <p> [ PARRAFO 2 ] </p>
  <p> [ PARRAFO 3 ] </p>
  <p> [ PARRAFO 4 ] </p>
</div>

y definimos estos estilos identificando cada párrafo con un número índice:

#ejemplo p:nth-child(1) { color: LightCoral; }
#ejemplo p:nth-child(2) { color: AliceBlue; }
#ejemplo p:nth-child(3) { color: GreenYellow; }
#ejemplo p:nth-child(4) { color: Gold; }

Veríamos esto:

p:nth-child(1) { color: LightCoral; }

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

p:nth-child(3) { color: GreenYellow; }

p:nth-child(4) { color: Gold; }

Hasta acá no parece nada del otro mundo pero, lo interesante es que podemos identificar los elementos con algún tipo de argumento más sofisticado, por ejemplo:

#ejemplo p:nth-child(2n+1) { /* propiedades */ }

establecería las propiedades de todos los párrafos impares y:

#ejemplo p:nth-child(2n) { /* propiedades */ }

establecería las propiedades de todos los párrafos pares:

nth-child(2n+1) = IMPARES 1 3 5 7	nth-child(2n) = PARES 2 4 6
el primer item de la lista el segundo item de la lista el tercer item de la lista el cuarto item de la lista el quinto item de la lista el sexto item de la lista el septimo item de la lista	el primer item de la lista el segundo item de la lista el tercer item de la lista el cuarto item de la lista el quinto item de la lista el sexto item de la lista el septimo item de la lista

Algunos ejemplo más aplicados a una lista:

nth-child(3) identifica al tercer elemento

• el primer item de la lista
• el segundo item de la lista
• el tercer item de la lista
• el cuarto item de la lista
• el quinto item de la lista
• el sexto item de la lista
• el septimo item de la lista

ul#milista li:nth-child(3) {
  background-color: #6495ED;
  font-weight: bold;
  text-transform: uppercase;
}

nth-child(2n+1) identifica a los elementos impares [ 1 3 5 7 ]

• el primer item de la lista
• el segundo item de la lista
• el tercer item de la lista
• el cuarto item de la lista
• el quinto item de la lista
• el sexto item de la lista
• el septimo item de la lista

ul#milista li:nth-child(2n+1) {
  background-color: #789;
  color: #FFF;
}

nth-child(3n+1) identifica a los elementos 1 4 y 7

• el primer item de la lista
• el segundo item de la lista
• el tercer item de la lista
• el cuarto item de la lista
• el quinto item de la lista
• el sexto item de la lista
• el septimo item de la lista

ul#milista li:nth-child(3n+1) {
  background-color: #000;
  border: 2px solid #456;
  color: #DEF;
  font-size: 18px;
}