Selector CSS nth-child: odd, even y fórmulas con ejemplos

Hoy vamos a repasar unas bases de CSS. Suelo usar los selectores CSS nth-child en mis artículos.

Y eso me hizo darme cuenta de que nunca había repasado de verdad cómo se usan los selectores css nth-child. nth-child es una pseudoclase CSS que permite seleccionar elementos.

Hoy vamos a explorar las opciones de este potente selector CSS con unos cuantos ejemplos.

Empecemos por algunos selectores css nth-child básicos:

Podemos indicar el número del elemento que queremos seleccionar. Digamos que queremos seleccionar el tercer elemento de la lista.

.article-list li:nth-child(3) {
    	color: green;
}

<ul class="article-list">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

El resultado es que solo el tercer elemento aparece en verde

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Selector odd/even

Podemos seleccionar los elementos de posición par o impar con odd y even.

.article-list-odd li:nth-child(odd) {
    	color: green;
}

<ul class="article-list-odd">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
</ul>

El resultado es que solo se seleccionan los elementos impares:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

y nth-child(even) para los pares:

.article-list-even li:nth-child(even) {
    	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Cada X elementos

Otra cosa que se puede hacer con el selector nth-child, es seleccionar cada x elementos. Digamos, por ejemplo, que queremos seleccionar uno de cada cuatro elementos:

... li:nth-child(4n) {
	color: red;
}

Ahora se selecciona cada cuarto elemento hijo:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

... li:nth-child(4n+1) {
	color: red;
}

Y si queremos incluir el primer elemento:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9

O el segundo elemento:

... li:nth-child(4n+2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Seleccionar los x primeros elementos

Podemos incluso usar un selector que selecciona todas las etiquetas menos los tres primeros elementos.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Seleccionar todos los elementos menos los x primeros

Podemos incluso usar un selector que selecciona todas las etiquetas menos los tres primeros elementos.

... li:nth-child(n+4) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

Seleccionar el primer o el último elemento

También podemos seleccionar el primer o el último elemento con :first-child y :last-child

... li:first-child {
	color: red;
}
... li:last-child {
	color: blue;
}

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Y con eso podemos aplicar un desplazamiento para llegar al penúltimo elemento de la lista.

li:nth-last-child(2) {
	color: red;
}

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Combinar selectores

¡También podemos combinar los selectores nth-child!

Digamos que quieres obtener todos los elementos pares dentro de las listas impares.

ul:nth-child(odd) li:nth-child(even) {
	color: red;
}

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

Conclusión

Espero que este artículo te sirva al maquetar tus sitios con la pseudoclase nth-child. Si quieres ver qué otras pseudoclases css existen, puedes consultar los artículos siguientes:

• pseudoclase CSS :not
• pseudoclase CSS :where
• pseudoclase CSS :empty