El Selector :nth-child En CSS Sin Enredos

El selector :nth-child puede parecer un jeroglífico al principio, pero en cuanto se entiende, se convierte en una herramienta importante para cualquier hoja de estilos profesional.

Índice:

• ¿Qué es :nth-child en CSS?
• Cómo funciona la fórmula de :nth-child
• Ejemplos prácticos con :nth-child
• Casos de uso comunes
• Errores comunes al usar :nth-child
• Diferencias con :nth-of-type
• Conclusión

¿Qué es :nth-child en CSS?

:nth-child() es una pseudoclase estructural de CSS que permite seleccionar elementos en función de su posición dentro del elemento padre. Se utiliza especialmente cuando se trabaja con listas, tablas o grids y se requiere aplicar estilos alternos o selectivos sin añadir clases manualmente.

Cómo funciona la fórmula de :nth-child

La sintaxis es simple: :nth-child(an + b)

• a es el múltiplo (frecuencia).
• n es un contador que empieza desde 0.
• b es el desplazamiento o posición de inicio.

Por ejemplo, :nth-child(2n) selecciona todos los elementos en posiciones pares: 2, 4, 6, etc.

Ejemplos prácticos con :nth-child

A continuación se presentan ejemplos típicos visualizados con una fila de elementos:

• :nth-child(4) → Selecciona solo el cuarto elemento.
• :nth-child(even) → Selecciona elementos en posición par (2º, 4º, 6º…)
• :nth-child(odd) → Selecciona los impares (1º, 3º, 5º…)
• :nth-child(3n) → Cada tercer elemento (3º, 6º, 9º…)
• :nth-child(3n-1) → Empieza desde el 2º y luego cada tres (2º, 5º, 8º…)
• :nth-child(-n + 3) → Los tres primeros elementos.
• :nth-child(n + 3) → Desde el 3º hasta el final.

Explora cómo funciona :nth-child() seleccionando diferentes fórmulas. Los elementos resaltados cambian en función de la regla seleccionada:

Gracias a esta herramienta interactiva, puedes entender cómo CSS aplica las reglas de :nth-child sin necesidad de clases adicionales.

Casos de uso comunes

1. Listas con estilo alterno: aplicar fondo distinto a elementos pares e impares.
2. Tablas: resaltar filas alternas para mejor lectura.
3. Grillas: estilizar columnas específicas o aplicar márgenes a columnas impares.
4. Cards de productos: aplicar efectos o animaciones a ciertos bloques.

Errores comunes al usar :nth-child

• Confundir :nth-child con :nth-of-type. El primero se basa en la posición general, el segundo en el tipo de etiqueta.
• Olvidar que los espacios vacíos o comentarios en HTML cuentan como hijos.
• Usar selectores incorrectos cuando hay otros elementos entre ellos.

Diferencias entre :nth-child y :nth-of-type

Aunque pueden parecer similares, :nth-child() y :nth-of-type() se comportan de forma distinta dependiendo del contenido HTML. La diferencia clave está en qué cuentan para decidir qué elementos seleccionar.

:nth-child(n) selecciona el n-ésimo hijo total del elemento padre, sin importar la etiqueta.
:nth-of-type(n) selecciona el n-ésimo hijo de ese tipo de etiqueta (por ejemplo, el tercer <li>).

Observa este ejemplo:

<ul>
  <li>Primer ítem</li>          <!-- 1er hijo, 1er <li> -->
  <span>Texto intermedio</span>  <!-- 2º hijo, no es <li> -->
  <li>Segundo ítem</li>         <!-- 3er hijo, 2º <li> -->
  <li>Tercer ítem</li>          <!-- 4º hijo, 3er <li> -->
</ul>

En este caso:

• li:nth-child(3) selecciona el segundo <li>, porque es el tercer hijo total del <ul>.
• li:nth-of-type(3) selecciona el tercer <li>, sin contar el <span>, ya que solo tiene en cuenta los <li>.

Esta diferencia es fundamental cuando el padre contiene mezcla de elementos como <div>, <span> y <li>, ya que :nth-child() evalúa la posición general, mientras que :nth-of-type() se centra solo en los elementos del mismo tipo.

Conclusión

El selector :nth-child permite ahorrar código, evitar clases redundantes y aplicar lógica estructural con precisión. Es especialmente útil en diseños complejos con múltiples elementos que siguen patrones visuales.

Dominar este selector mejora tanto la productividad como la semántica del HTML y es una de las herramientas más poderosas que ofrece CSS3.