La pseudo-class nth-child en CSS

16-07-2013 - Andrés Cruz

La pseudo-class nth-child en CSS In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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:

  • Primero
  • Segundo
  • Tercero
  • Cuarto
  • Quinto
  • Sexto
  • Séptimo

¿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:

  • Primero
  • Segundo
  • Tercero
  • Cuarto
  • Quinto
  • Sexto
  • Séptimo
  • Octavo
  • Noveno
  • Décimo
  • Undécimo
  • Duodécimo
  • Decimotercero
  • Decimoquinto
  • Decimosexto
  • Decimoséptimo

¿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:

Celda 1 1 Celda 1 2
Celda 2 1 Celda 2 2
Celda 3 1 Celda 3 2

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!