Existen muchos selectores y pseudo-clases de CSS que nos pueden ser muy útiles a la hora de preprar una maquetación web y ajustar los estilos para adaptarnos a un diseño concreto.
La pseudoclase :nth-child(an+b) de CSS es una de ellas, y nos permite seleccionar varios elementos hijos de la clase indicando su posición, según un argumento o fórmula.
Es decir, si tenemos por ejemplo una lista <ul> y queremos modificar el color sólo para el 3er elemento, podríamos usarlo así:
ul li:nth-child (3) { color: red; }
A partir de ese uso básico, tenemos multitud de opciones adicionales según lo que necesitemos conseguir.
Pares / Impares (odd / even)
Si necesitamos seleccionar los elementos pares o impares de una lista de elementos, nth-child (odd) y nth-child (even) nos permite hacerlo fácilmente:
La fórmula (an + b)
nth-child usa una fórmula para calcular que elementos queremos seleccionar que nos permite casi cualquier combinación mediante 3 variables:
a – es el ciclo
n – es el contador, empezando en 0
b – es el valor del offset, es decir, a partir de qué elemento empezamos a contar.
Por tanto, nth-child(3n+4) implica un ciclo de 3 en 3, a partir del 4º elemento.
De este modo, los ejemplos para pares/impares que veíamos, se podrían sustituir por:
- Impares: li:nth-child(2n+1)
Como el contador n empieza en 0, para los impares le añadimos un offset de 1 para empezar - Pares: li:nth-child(2n)
Vamos a ver ejemplos para verlo más claro:
:nth-child(3n)
:nth-child(3n+4)
:nth-child(4n+1)
:nth-child(-n+4)
:nth-child(n+5)
:nth-child anidados
Esta pseudo-clase no nos sirve sólo para listas simples de elementos, sino que también podemos utilizarla para cualquier combinación de etiquetas anidadas:
.lista nth-child(2) :nth-child(3)
Selecionamos el 3er elemento del segundo bloque:
:last-child y :first-child
Aunque con la fórmula que hemos visto de nth-child podemos indicar el primero o el último elemento de una lista, también tenemos otras dos opciones más sencillas para esos casos:
p:last-child() -> selecciona el último elemento de tipo párrafo
li:first-child -> Selecciona el primer elemento de tipo li
:nth-of-type
La pseudo-clase :nth-of-type funciona básicamente igual que nth-child, pero es más específica, teniendo en cuenta sólo el tipo de elemento que le indicamos.
Es decir, si estamos iterando sobre una lista en la que todos son elementos <li>, funcionarán exactamente igual, pero si por ejemplo estamos trabajando con una capa que contiene diferente tipo de elementos, nth-of-type sólo tendrá en cuenta los de la clase especificada.
li:nth-child(odd)
li:nth-of-type(odd)
Si existen otros elementos en la lista que no son <li>, nth-child los tendrá en cuenta, aunque no los seleccione, y nth-of-type no los tendrá en cuenta en la iteración:
Y por si con éstas no tenemos suficientes opciones, además tenemos :nth-last-child y :nth-last-of-type, que funcionan igual, pero empiezan a contar por el final.
Para poder hacer pruebas con diferentes tipos de elementos para testar la fórmula y confirmar que selecciona los elementos necesarios:
http://lea.verou.me/demos/nth.html
Sin duda, suficientes alternativas para poder encontrar la forma de dar estilos diferentes a los elementos de cualquier tipo de lista o tabla para ajustarlo a nuestras necesidades de diseño y maquetación.