Selección avanzada en CSS

Los selectores nth-child y nth-of-type en CSS te permiten aplicar estilos a elementos específicos basados en su posición y tipo dentro de su contenedor. Son especialmente útiles cuando trabajas con listas, tablas o cualquier estructura repetitiva.

¿Qué es nth-child?

El selector nth-child selecciona un elemento en función de su posición relativa dentro de su contenedor independientemente de su tipo.

Sintaxis básica

selector:nth-child(an+b) {
  /* styles */
}

• a: el número de pasos entre selecciones (incremento).
• b: el inicio de la secuencia (offset).
• n: representa un número entero que varía desde 0 hacia el infinito.

Por ejemplo:

• nth-child(2) selecciona el segundo hijo de cualquier tipo.
• nth-child(2n) selecciona todos los hijos con índices pares.
• nth-child(2n+1) selecciona todos los hijos con índices impares.

Ejemplos

Seleccionar elementos pares en una lista

<ul>
  <li>Item 1</li>
  <li>Item 2</li> ✅
  <li>Item 3</li>
  <li>Item 4</li> ✅
</ul>

li:nth-child(2n) {
  color: blue; /* Styles for even items */
}

Seleccionar cada tercer elemento

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p> 
  <p>Paragraph 3</p> ✅
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p> ✅
</div>

p:nth-child(3n) {
  background-color: yellow; /* Highlight every 3rd element */
}

Seleccionar solo el quinto elemento

div:nth-child(5) {
  font-weight: bold; /* Bold only the 5th child */
}

¿Qué es nth-of-type?

El selector nth-of-type selecciona elementos basándose en su posición relativa dentro de su contenedor, pero solo entre elementos del mismo tipo.

Sintaxis básica

selector:nth-of-type(an+b) {
  /* styles */
}

Funciona igual que nth-child, pero restringe la selección a elementos del mismo tipo.

Ejemplos

Aplicar estilos al tercer párrafo

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <span>Span 1</span> ❌
  <p>Paragraph 3</p> ✅
  <p>Paragraph 4</p>
</div>

p:nth-of-type(3) {
  color: red; /* Style only the 3rd <p> tag */
}

Alternar estilos entre filas pares en una tabla

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr> ✅
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr> ✅
</table>

tr:nth-of-type(2n) {
  background-color: lightgray; /* Zebra striping for even rows */
}

Diferencia clave entre nth-child y nth-of-type

• nth-child: Selecciona cualquier elemento basado en su posición entre todos los hijos.
• nth-of-type: Selecciona elementos basándose en su tipo específico.

Comparación práctica

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <span>Span 2</span>
  <p>Paragraph 3</p>
</div>

/* Styles with nth-child */
div:nth-child(3) {
  color: green; /* Selects the 3rd child (regardless of type) */
}

/* Styles with nth-of-type */
p:nth-of-type(3) {
  color: blue; /* Selects the 3rd <p> element only */
}

Enlaces útiles

• MDN: nth-child
• MDN: nth-of-type
• MDN: CSS Selectors

Estos selectores son fundamentales para trabajar con estructuras repetitivas y aplicar estilos precisos sin necesidad de clases adicionales.