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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter