Pseudo clase NTH Child con of-type en CSS

La pseudo clase NTH Child en CSS es ampliamente conocida por su capacidad para seleccionar elementos según posiciones específicas, como números pares o impares. Ahora aparece con una mejora importante que permite elegir elementos específicos de un tipo determinado, evitando errores comunes en el conteo de elementos cuando aparece una estructura distinta dentro del contenedor.

¿Para qué sirve la pseudo clase NTH Child?

Generalmente utilizada para seleccionar:

• Elementos pares (2n).
• Elementos impares (2n+1).
• Elementos en posiciones específicas dentro del contenedor.

De esta forma, si quieres modificar cada segundo párrafo dentro de un mismo contenedor, utilizarías la siguiente estructura básica:

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

¿Qué problemas presenta la pseudo clase original?

La versión inicial tenía un inconveniente al insertar diferentes tipos de elementos en el contenedor. Por ejemplo, si incluías un span entre varios párrafos, el conteo original se rompía y seleccionaba posiciones incorrectas.

Ejemplo del error original

Al añadir un elemento != párrafo (span) se generaban errores en la selección:

<div>
  <p>Primer párrafo</p>
  <span>Hola, soy un span</span>
  <p>Segundo párrafo</p>
  <p>Tercer párrafo</p>
  <p>Cuarto párrafo</p>
</div>

En este caso, la selección original no resaltaría correctamente los elementos pares deseados.

¿Cómo solucionar este problema con NTH Child?

La novedad radica en utilizar of-type, especificando el tipo exacto de elemento que deseamos seleccionar y así evitar errores en el conteo.

Ejemplo de solución usando NTH Child con of-type

Para seleccionar únicamente párrafos pares (p) aunque existan otros elementos dentro del contenedor, puedes hacer:

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

Con esta estructura, incluso si insertas elementos como span, sólo se verán afectados los párrafos ubicados en posiciones pares reales y no se producirán errores en la selección.

¿Por qué es importante conocer esta mejora?

• Precisión en la selección de elementos.
• Evita errores al insertar elementos distintos en una estructura definida de párrafos u otros tags HTML.
• Mejor organización y control del diseño con CSS.

Explorar y practicar estas herramientas avanzadas contribuye a dominar CSS con eficacia, optimizando el tiempo y recursos durante el desarrollo.