La pseudo-class nth-child en CSS

La pseudo-clase nth-child en CSS permite seleccionar elementos dentro de una lista de etiquetas consecutivas o no consecutivas; Esta pseudo-clase utiliza una fórmula matemática para determinar el orden. 

Por ejemplo, :nth-child(2n) selecciona todos los elementos que son el segundo, cuarto, sexto, y así sucesivamente, hijo de su padre. También se pueden utilizar números con una fórmula adicional para seleccionar elementos específicos, como :nth-child(4n + 1) para seleccionar el primer elemento y cada cuarto elemento después de ese.

La pseudo-clase :nth-child(); puede ser usada para seleccionar cualquiera de los elementos del DOM como contenedores (div), listas, párrafos, etc, que se encuentren a lo largo del documento, lo único que necesitas especificar es el valor de 'n'; a continuación veamos una serie de ejemplos para comprender cómo funciona la pseudo-class nth-child en CSS.

La pseudo-clase :nth-child() es una de esas herramientas de CSS que parecen sencillas… hasta que empiezas a mezclar etiquetas, estructuras raras y fórmulas. En esta guía te explico cómo funciona de verdad, cómo evitar errores típicos y cómo aplicarla en maquetación real.

Además, integro mis propias vivencias: más de una vez me he llevado alguna sorpresa aplicando un nth-child que “debería funcionar” y no lo hacía por culpa del HTML.

Qué es la pseudo-clase :nth-child y para qué sirve

La pseudo-class :nth-child() permite seleccionar un elemento según su posición real dentro de su padre. No mira el tipo de etiqueta (para eso está nth-of-type). Solo le importa el lugar que ocupa entre sus hermanos: primero, segundo, tercero, etc.

Cuando la probé por primera vez en una lista <ul>, me di cuenta de lo potente que es: podía marcar el primer <li>, el tercero, el quinto… sin escribirlos uno a uno.

Cómo funciona el conteo real de hermanos en el DOM

El conteo siempre empieza en 1 (no en 0).

• Cuenta todos los elementos hermanos.
• Da igual si son <p>, <li>, <div> o <em>.
• Si el tercer hijo es un <span> pero tu selector es li:nth-child(3), no seleccionará nada, porque el tercer hijo NO es un <li>.

Y cuenta todos los hijos, no solo los que coinciden con tu selector.

Por ejemplo:

<div>
 <span>1</span>
 <span>2</span>
 <em>3</em>
 <span>4</span>
</div>

Si aplicas:

span:nth-child(3)

No selecciona nada, porque el hijo 3 es un <em>, no un <span>.

En mis pruebas con HTML mezclado, este suele ser uno de los errores más comunes.

Diferencias rápidas con :nth-of-type

• nth-child(n) → cuenta todos los hijos.
• nth-of-type(n) → cuenta solo los hijos del tipo indicado.

Si en tu HTML hay mezclas, nth-of-type() suele dar menos dolor de cabeza.

Diferencias rápidas con :nth-of-type

• nth-child() → cuenta TODOS los elementos → selecciona sólo si coincide el tipo.
• nth-of-type() → cuenta SOLO los del tipo indicado.

Ejemplo donde todo el mundo se confunde:

span:nth-child(2n+1)

Si hay un <em> en medio, el conteo sigue contando ese <em> aunque no se seleccione, desfasando el patrón.

Sintaxis de :nth-child() explicada fácil

Número exacto

:nth-child(4)

Selecciona el cuarto hijo.

Útil para marcar elementos concretos en listas cortas, como remarcar el primer y tercer <li> (justo como en tu ejemplo original).

Odd y Even

Las palabras clave mágicas:

:nth-child(odd)   /* 1,3,5,7... */
:nth-child(even)  /* 2,4,6,8... */

Son perfectas para alternar estilos sin pensar en fórmulas.

Yo los uso muchísimo para tablas rápidas o listados largos.

Fórmula An+B sin dolor

La fórmula An+B permite crear patrones repetitivos:

• A: intervalo
• n: contador que empieza en 0
• B: offset

Ejemplos útiles

• Selector    Significado
• 2n    pares (2,4,6…)
• 2n+1    impares (1,3,5…)
• 3n    cada 3
• 3n+4    cada 3 empezando en el 4
• -n+3    primeros 3 elementos

La pseudo-clase nth-child en CSS para seleccionar dos elementos

Para la siguiente lista:

<ul class="nth_numerica">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
</ul>

Aplicaremos la siguiente regla CSS usando la pseudo-clase nth-child en CSS para cambiar el color de fondo (background) por un gris oscuro al primer y tercer elemento:

ul.nth_numerica li:nth-child(1), ul.nth_numerica li:nth-child(3) {    background: #999; }

Aplicada la regla anterior obtenemos el siguiente resultado:

¿Qué es lo que ha pasado?

Simplemente definimos valores numérico a 'n', para indicar la posiciones de los elementos que queremos seleccionar para aplicar la regla anterior; para este ejemplo 'n' tuvo los valores de uno (nth-child(1)) y tres (nth-child(1)) respectivamente.

La pseudo-clase nth-child en CSS para seleccionar elementos impares

¿Qué pasa si quieres algo un poco más genérico?, es decir si quieres aplicar ciertas reglas a los elementos impares comenzando a contar desde uno, por ejemplos a los elementos 1,3,5,7 ... n y sin seleccionar uno a uno los elementos.

Para la siguiente lista:

<ul class="nth_formula">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
  <li>Octavo</li>
  <li>Noveno</li>
  <li>Décimo</li>
  <li>Undécimo</li>
  <li>Duodécimo</li>
  <li>Decimotercero</li>
  <li>Decimoquinto</li>
  <li>Decimosexto</li>
  <li>Decimoséptimo</li>
</ul>

Aplicaremos la siguiente regla CSS:

ul.nth_formula li:nth-child(2n+1) {    background: #999; }

Como resultado tendremos:

¿Qué es lo que a pasado?

La fórmula 2n+1 (donde para este ejemplo x=2 y k=1) tiene como equivalente en algún lenguaje de programación a:

for(i = k; i < n; i+x){}

La pseudo-clase nth-child en CSS y los valores odd y even

Veamos un último ejemplo, un poco más interesante y muy utilizado; para la siguiente tabla:

<table class="alternar">
	<tr>
		<td>Celda 1 1<td>
		<td>Celda 1 2<td>
	</tr>
	<tr>
		<td>Celda 2 1<td>
		<td>Celda 2 2<td>
	</tr>
	<tr>
		<td>Celda 3 1<td>
		<td>Celda 3 2<td>
	</tr>
</table>

Aplicaremos las siguientes reglas:

table.alternar tr:nth-child(odd) {    background: #999; } table.alternar tr:nth-child(even) {    background: #CCC; }

Que igualmente permiten cambiar el color de fondo de algún elemento, en este caso, de cada una de las celdas.

El resultado es el siguiente:

Las dos palabras nos indican en qué elementos del DOM va a aplicar dicha regla; para los impares(odd) el color de fondo es #999 y para los elementos pares(even) es #CCC.

Ejemplos varios

Alternar colores en listas

ul li:nth-child(odd) {
 background: #f5f5f5;
}
ul li:nth-child(even) {
 background: #e1e1e1;
}

Cuando probé esto por primera vez, me di cuenta de que no necesitaba ningún :first-child ni clases manuales. Sólo con odd/even la lista queda limpia.

Alternar filas de tablas

Tu ejemplo clásico se adapta así:

table tr:nth-child(odd)  { background: #999; }
table tr:nth-child(even) { background: #CCC; }

Esto sigue siendo una de las formas más sencillas de mejorar la legibilidad de datos.

Seleccionar solo algunos elementos en grids o cards

.card:nth-child(3n) {
 transform: scale(1.05);
}

Cada 3 tarjetas recibirá un estilo distinto. Útil cuando necesitas romper la monotonía en layouts repetitivos.

Cómo influye mezclar etiquetas

Si tu HTML es así:

<li>1</li>
<li>2</li>
<div>OPS</div>
<li>3</li>

Entonces:

li:nth-child(3)

NO selecciona el tercer <li>, sino que mira directamente:

• → “¿El tercer hijo es un <li>?”.
• → No. Es un <div>.
• → Resultado: no selecciona nada.

Uso moderno: :nth-child(A of selector)

Novedad poco explicada:

:nth-child(2 of .item)

Selecciona el segundo elemento que tenga la clase .item aunque haya otros elementos en medio. Mucho más predecible.

nth-child vs nth-last-child
:nth-last-child(1)
/* equivale al último hijo */

Muy útil cuando trabajas con estructuras que se generan dinámicamente.

Errores comunes y cómo evitarlos

Cuando nth-child no selecciona lo que esperas

Causas típicas:

• Hay elementos invisibles (<script>, <template>).
• Se mezclan etiquetas sin querer.
• El patrón An+B no empieza donde crees.

Errores típicos con HTML real no limpio

Si heredas un HTML donde alguien mezcló <p>, <div> y <span> sin orden, tu patrón será impredecible.
La solución:

• usar nth-of-type(),
• limpiar el HTML,
• o aplicar la nueva sintaxis “of S”.

Resumen

• Cuando uso nth-child(1), nth-child(3) para marcar elementos específicos, lo hago igual que en tu ejemplo de lista numerada: directo y sin misterios.
• Cuando quiero impares, tiro de 2n+1 como tú comentabas; es la forma más transparente de “ver” cómo avanza el patrón.
• Para tablas, odd/even sigue siendo mi combinación favorita. Igual que en tu ejemplo del fondo gris, la alternancia mejora muchísimo la lectura.

Seleccionar rangos de elementos con CSS

Al seleccionar rangos de datos mostrados -por ejemplo- en listas uls debe ser de carácter casi obligatorio demarcar esta región seleccionada por el usuario, esto se puede hacerse muy fácilmente con un poco de CSS y es lo que mostraremos en esta entrada.

El selector nth-child al rescate para seleccionar rangos

Ya hemos hablado sobre el selector o pseudo-class llamada nth-child en una entrada anterior llamada: LA PSEUDO-CLASS NTH-CHILD EN CSS; este selector permite seleccionar elementos dentro de una lista de etiquetas consecutivas o no consecutivas.

ul li:nth-child(n+5):nth-child(-n+15) {
  background: #08B;
}

Y obtenemos:

¿Cómo funciona el CSS anterior?

Si vemos por trozos el CSS anterior verás lo sencillo que es; primero se seleccionan todos los elementos a partir de la lista número cinco (5) -5 a 20-:

ul li:nth-child(n+5){
  background: #08B;
}

A partir de este rango de selección se selecciona otro rango empleando otro selector nth-child sobre el grupo ya seleccionado con nth-child(-n+15); de esta forma se logra demarcar una región de una forma sencilla y eficiente.

FAQs

• ¿Qué selecciona realmente :nth-child()?
  • El hijo número N dentro de un padre, contando desde 1 y contando todos los tipos de etiqueta.
• ¿nth-child y nth-of-type son lo mismo?
  • No. El primero cuenta todos los hermanos. El segundo cuenta solo los del mismo tipo.
• ¿Por qué mi nth-child no funciona?
  • Porque la posición real en el DOM no coincide con el tipo de elemento que estás seleccionando.
• ¿Qué significa la fórmula An+B?
  • Un patrón que repite cada A elementos, desplazado B posiciones.
• ¿Qué pasa si mezclo etiquetas dentro del mismo contenedor?
  • Tu patrón puede romperse. Usa nth-of-type o limpia el HTML.

El siguiente selector, la pseudo-clase CSS :checked selecciona elementos de formulario.