Entender nth-child con ejemplos prácticos

Las pseudo-clases de CSS nos dan múltiples opciones para ajustar la maquetación web al diseño. nth-child es una de ellas, pero no siempre es fácil de entender y aplicar.


por

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)

CSS nth-child ejemplos
Seleccionamos cada 3 elementos, como no indicamos offset, empieza en 0

:nth-child(3n+4)

CSS nth-child ejemplos
Cada 3 elementos dejando un ofsset de 4

:nth-child(4n+1)

CSS nth-child ejemplos
Cada 4 elementos empezando por el 1

:nth-child(-n+4)

CSS nth-child ejemplos
Los 4 primeros elementos

:nth-child(n+5)

CSS nth-child ejemplos
Todos a partir del 5º elemento

: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.