El selector nth-child en CSS, se refiere al N-ésimo elemento de una tabla o lista. Con este elemento en mente, podemos por ejemplo: alternar entre elementos pares (even) o impares (odd) o selecccionar un elemento específico.
Existen muchos selectores y pseudo-clases de CSS que nos van a resultar bastante útiles a la hora de desarrollar la parte front-end de nuestra aplicación web.
La pséudoclase :nth-child de CSS es una de ellas, y que nos permite seleccionar varios elementos hijos de la clase indicando su posición, según un argumento o fórmula.
En el ejemplo que vamos a mostrar la pséudoclase va a ser en una lista <ul> y que vamos a poder modificar el color de fondo a nuestro antojo.
Para ello vamos a este código HTML de plantilla:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso de nth-child | Lacodigoteca.com</title>
<style>
ul{
list-style-type: none;
display: flex;
}
li {
font-weight: bold;
text-transform: uppercase;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size:x-large;
}
</style>
</head>
<body>
<ul>
<li>l</li>
<li>a</li>
<li>c</li>
<li>o</li>
<li>d</li>
<li>i</li>
<li>g</li>
<li>o</li>
<li>t</li>
<li>e</li>
<li>c</li>
<li>a</li>
<li>.</li>
<li>c</li>
<li>o</li>
<li>m</li>
</ul>
</body>
</html>
Ahora vamos a usar las pséudoclases que nos facilita :nth-child.
first-child
Vamos a poner un fondo de color rojo al primer elemento de la lista.
li:first-child {
background: red;
}
last-child
Vamos a poner un fondo de color rojo al último elemento de la lista.
li:last-child {
background: red;
}
nth-child(3)
Vamos a poner un fondo de color rojo al tercer elemento de la lista, o el que deseemos, hay que sustituir el 3 por el número de posición del elemento que queremos.
li:nth-child(3) {
background: red;
}
nth-child(-n + 3)
Vamos a aplicar el fondo de color rojo desde el primer elemento hasta el tercero la lista, o el que deseemos, hay que sustituir el 3 por el número de posición del elemento que queremos.
li:nth-child(-n + 3) {
background: red;
}
nth-child(n + 3)
Vamos a aplicar el fondo de color rojo desde el tercer elemento en adelante.
li:nth-child(n + 3) {
background: red;
}
Comprensión de la fórmula
nth-child usa una fórmula para calcular que elementos vamos a seleccionar y que nos permitirá prácticamente cualquier combinación usando estas 3 variables:
a – es el ciclo
n – es el contador, empezando en 0
b – es el valor del offset, es decir, a partir de qué elemento empezamos a contar.
Por ejemplo, nth-child(3n+7) realizará un ciclo de 3 en 3, a partir del 7º elemento de la lista.
nth-last-child(3)
Es parecido al nth-child, pero en lugar de empezar desde el primer elemento, lo hará desde el último.
li:nth-last-child(3) {
background: red;
}
Pares / Impares
Si necesitamos seleccionar los elementos pares o impares de una lista de elementos, nth-child (odd) y nth-child (even) nos permite hacerlo fácilmente:
Impares
Aplicará el fondo en rojo en aquellos elementos cuya posición del elemento sean impares.
li:nth-child(odd) {
background: red;
}
Pares
Aplicará el fondo en rojo en aquellos elementos cuya posición del elemento sean pares.
li:nth-child(even) {
background: red;
}
Otras utilidades
:nth-child anidados
Esta pseudo-clase no nos sirve sólo para listas simples de elementos, sino que también podemos utilizarla para cualquier combinación de etiquetas anidadas. Por ejemplo vamos a seleccionar el tercer elemento del segundo bloque, utilizando lo siguiente:
li nth-child(2) :nth-child(3)
:nth-of-type
La pseudo-clase :nth-of-type funciona básicamente igual que nth-child, pero es más específica, teniendo en cuenta sólo el tipo de elemento que le indicamos.
Es decir, si estamos iterando sobre una lista en la que todos son elementos <li>, funcionarán exactamente igual, pero si por ejemplo estamos trabajando con una capa que contiene diferente tipo de elementos, nth-of-type sólo tendrá en cuenta los de la clase especificada.
li:nth-child(odd)
li:nth-of-type(odd)
Si existen otros elementos en la lista que no son <li>, nth-child los tendrá en cuenta, aunque no los seleccione, y nth-of-type no los tendrá en cuenta en la iteración:
Y por si con éstas no tenemos suficientes opciones, además tenemos :nth-last-child y :nth-last-of-type, que funcionan igual, pero empiezan a contar por el final.
Sin duda, suficientes alternativas para poder encontrar la forma de dar estilos diferentes a los elementos de cualquier tipo de lista o tabla para ajustarlo a nuestras necesidades de diseño y maquetación.
Si quieres ver más artículos de CSS, te recomiendo que visites el siguiente enlace.
El origen de este artículo se debe al siguiente artículo del blog de estersola.com.