La pseudo-clase nth-child en CSS permite seleccionar elementos dentro de una lista de etiquetas consecutivas o no consecutivas; Esta pseudo-clase utiliza una fórmula matemática para determinar el orden. Por ejemplo, :nth-child(2n) selecciona todos los elementos que son el segundo, cuarto, sexto, y así sucesivamente, hijo de su padre. También se pueden utilizar números con una fórmula adicional para seleccionar elementos específicos, como :nth-child(4n + 1) para seleccionar el primer elemento y cada cuarto elemento después de ese. La pseudo-clase :nth-child(); puede ser usada para seleccionar cualquiera de los elementos del DOM como contenedores (div), listas, párrafos, etc, que se encuentren a lo largo del documento, lo único que necesitas especificar es el valor de 'n'; a continuación veamos una serie de ejemplos para comprender cómo funciona la pseudo-class nth-child en CSS.

La pseudo-clase nth-child en CSS para seleccionar dos elementos

Para la siguiente lista:

<ul class="nth_numerica">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
</ul>

Aplicaremos la siguiente regla CSS usando la pseudo-clase nth-child en CSS para cambiar el color de fondo (background) por un gris oscuro al primer y tercer elemento:

ul.nth_numerica li:nth-child(1), ul.nth_numerica li:nth-child(3) {    background: #999; }

Aplicada la regla anterior obtenemos el siguiente resultado:

¿Qué es lo que ha pasado?

Simplemente definimos valores numérico a 'n', para indicar la posiciones de los elementos que queremos seleccionar para aplicar la regla anterior; para este ejemplo 'n' tuvo los valores de uno (nth-child(1)) y tres (nth-child(1)) respectivamente.

La pseudo-clase nth-child en CSS para seleccionar elementos impares

¿Qué pasa si quieres algo un poco más genérico?, es decir si quieres aplicar ciertas reglas a los elementos impares comenzando a contar desde uno, por ejemplos a los elementos 1,3,5,7 ... n y sin seleccionar uno a uno los elementos.

Para la siguiente lista:

<ul class="nth_formula">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
  <li>Octavo</li>
  <li>Noveno</li>
  <li>Décimo</li>
  <li>Undécimo</li>
  <li>Duodécimo</li>
  <li>Decimotercero</li>
  <li>Decimoquinto</li>
  <li>Decimosexto</li>
  <li>Decimoséptimo</li>
</ul>

Aplicaremos la siguiente regla CSS:

ul.nth_formula li:nth-child(2n+1) {    background: #999; }

Como resultado tendremos:

¿Qué es lo que a pasado?

La fórmula 2n+1 (donde para este ejemplo x=2 y k=1) tiene como equivalente en algún lenguaje de programación a:

for(i = k; i < n; i+x){}

La pseudo-clase nth-child en CSS y los valores odd y even

Veamos un último ejemplo, un poco más interesante y muy utilizado; para la siguiente tabla:

<table class="alternar">
	<tr>
		<td>Celda 1 1<td>
		<td>Celda 1 2<td>
	</tr>
	<tr>
		<td>Celda 2 1<td>
		<td>Celda 2 2<td>
	</tr>
	<tr>
		<td>Celda 3 1<td>
		<td>Celda 3 2<td>
	</tr>
</table>

Aplicaremos las siguientes reglas:

table.alternar tr:nth-child(odd) {    background: #999; } table.alternar tr:nth-child(even) {    background: #CCC; }

Que igualmente permiten cambiar el color de fondo de algún elemento, en este caso, de cada una de las celdas.

El resultado es el siguiente:

Las dos palabras nos indican en qué elementos del DOM va a aplicar dicha regla; para los impares(odd) el color de fondo es #999 y para los elementos pares(even) es #CCC.