La pseudoclase :nth-child en CSS evolucionó para resolver uno de sus problemas más conocidos: cuando un elemento distinto rompía la cuenta de pares e impares. Ahora, con la sintaxis of, puedes filtrar la selección a un tipo específico de elemento y mantener la lógica intacta. Es una mejora pensada para quienes trabajan con maquetación dinámica y necesitan precisión.

¿Qué hace la pseudoclase nth-child en CSS?

La pseudoclase :nth-child te permite seleccionar elementos hijos según su posición dentro de un contenedor. Su uso más popular siempre ha sido aplicar estilos a posiciones pares o impares de una lista [00:08].

Imagina un div con seis párrafos numerados del primero al sexto. Si quieres resaltar los pares (segundo, cuarto y sexto), bastaría con escribir:

css div p:nth-child(2n) { color: red; font-weight: bold; }

La expresión 2n representa la fórmula matemática dos por n, donde n recorre los números enteros desde cero. El resultado: los párrafos en posiciones pares quedan en rojo y negrita.

¿Qué significa 2n en nth-child? Es una fórmula que selecciona cada segundo elemento, equivalente a los pares. Puedes cambiarla por 2n+1 para impares o por un número fijo como 3 para apuntar al tercer hijo.

¿Por qué nth-child fallaba con elementos mezclados?

Aquí viene el problema clásico. La pseudoclase original no distingue tipos de elementos: cuenta todos los hijos del contenedor padre, sin importar si son párrafos, spans o cualquier otra etiqueta [01:05].

En el ejemplo, si agregas un span con el texto Hola, soy un span dentro del mismo div, la cuenta se desordena. El span ocupa una posición y desplaza a los párrafos. Entonces los estilos terminan aplicándose al tercero y al quinto en lugar del segundo, cuarto y sexto.

Este comportamiento generaba bugs visuales difíciles de rastrear, sobre todo cuando el HTML se generaba de forma dinámica y no podías garantizar la estructura exacta de los hijos.

¿Cómo funciona la nueva sintaxis nth-child of en CSS?

La novedad consiste en agregar of seguido de un selector específico dentro del paréntesis. Esto le dice al navegador que cuente solo los elementos que coincidan con ese selector [01:31].

La sintaxis queda así:

css div p:nth-child(2n of p) { color: red; font-weight: bold; }

Con esta versión, aunque haya un span u otros elementos intercalados, la cuenta se hace únicamente sobre los párrafos. El segundo, cuarto y sexto p reciben el estilo sin que ningún otro tag interfiera.

¿Cuándo conviene usar nth-child of? Cuando trabajas con contenedores que mezclan distintos tipos de etiquetas y necesitas aplicar estilos a una posición específica de un solo tipo de elemento. Es ideal para listas dinámicas, tablas con encabezados o galerías mixtas.

¿En qué se diferencia de nth-of-type?

Aunque suenan parecidas, no son lo mismo. :nth-of-type selecciona la posición entre elementos del mismo tipo, pero no acepta selectores complejos. La nueva sintaxis of dentro de :nth-child te deja usar selectores más elaborados, como clases o combinaciones, lo que abre la puerta a casos de uso más específicos.

¿Qué problema resuelve nth-child of en proyectos reales?

La solución impacta directamente en la mantenibilidad del CSS. Antes, si alguien insertaba un nuevo elemento dentro del contenedor, los estilos basados en posición podían romperse sin aviso. Ahora puedes blindar tus selectores para que respondan solo al tipo de elemento que te interesa.

Algunos escenarios donde brilla esta mejora:

• Aplicar bandas de color alternas en filas de tablas que incluyen encabezados o separadores.
• Resaltar productos pares en una galería que mezcla tarjetas y banners.
• Estilizar mensajes específicos en un chat donde se intercalan notificaciones del sistema.

La pseudoclase :nth-child con of te devuelve el control sobre la cuenta y elimina sorpresas cuando el HTML cambia. Es una de esas mejoras pequeñas que ahorran horas de depuración.

¿Ya probaste esta sintaxis en algún proyecto? Cuéntame en los comentarios cómo la usaste y qué problema te ayudó a resolver.