La pseudo clase nth-child CSS se usa para seleccionar elementos en una lista de hermanos, es decir, seleccionamos elementos en base a la posición en la que se encuentre el elemento.
Dicho así puede llegar a confundir, por eso, mejor ver un ejemplo para entenderlo.
Tenemos en HTML un listado de marcas de coches:
<ul class="listaCoches">
<li>Ford</li>
<li>Volvo</li>
<li>BMW</li>
<li>Mercedes</li>
<li>Kia</li>
<li>Nissan</li>
<li>Honda</li>
<li>Toyota</li>
</ul>
La idea de usar la pseudo clase nth-child CSS en este ejemplo sería por ejemplo para dar diferentes estilos a cada elemento sin tener que crear una clase. Hay distintas formas de aplicar estilos con nth-child indicando diferentes valores dentro de los paréntesis. Aquí les dejo todas las posibilidades que podemos utilizar.
nth-child(even) y nth-child(odd)
Utilizando el siguiente código CSS y la pseudo clase nth-child(even) y nth-child(odd) podemos indicar que los elementos pares tengan un estilo y los impares otro.
.listaCoches li:nth-child(odd) {
background:#000;
color:#fff;
}
.listaCoches li:nth-child(even) {
background:#e8e8e8;
}
Este mismo estilo podemos aplicarlo también utilizando otro valor, en este caso se reemplazaría nth-child(odd) por nth-child(2n+1) y nth-child(even) por nth-child(2n), uno indica los elementos impares (2n+1) y otro los pares (2n).
Así quedaría este código aplicado a la lista anterior. Ver ejemplo en JSfiddle.
See the Pen nth-child(odd) y nth-child(even) by JVLDesign (@vazquezdesigner) on CodePen.
nth-child(X)
Si lo que queremos es cambiar el estilo solamente de un elemento de la lista podemos utilizar el número en el que se encuentra en la lista el elemento. Si en la lista anterior queremos cambiar solamente el estilo de la lista BMW, utilizamos nth-child(3), indicando con CSS que es el tercero en la lista.
.listaCoches li:nth-child(3) {
background:#70b3ad;
color:#fff;
}
Así podríamos dar estilos diferentes a varios elementos:
.listaCoches li:nth-child(1), .listaCoches li:nth-child(5) {
background:#F6C036;
color:#fff;
}
.listaCoches li:nth-child(2), .listaCoches li:nth-child(6) {
background:#e8e8e8;
color:#000;
}
Como vemos en el ejemplo, hemos añadido estilos al elemento 3 con fondo turquesa, al 1 y al 5 con un fondo amarillo, y al 2 y al 6 con un fondo gris. Ver ejemplo en JSfiddle.
See the Pen nth-child(valor) by JVLDesign (@vazquezdesigner) on CodePen.
nth-child(Xn)
Con este valor, añadiendo al número la letra n, indicamos que se seleccionen los múltiplos x2 de este elemento.
Si por ejemplo queremos indicar que el estilo se aplique a todos los múltiplos de 3, añadimos el siguiente código. Ver ejemplo en JSfiddle.
.listaCoches li:nth-child(3n) {
background:#70b3ad;
color:#fff;
}
See the Pen nth-child(Xn) by JVLDesign (@vazquezdesigner) on CodePen.
Si queremos que se aplique a los múltiplos x2 de 5 sería el siguiente:
.listaCoches li:nth-child(5n) {
background:#70b3ad;
color:#fff;
}
nth-child(n + X)
Para añadir estilos a partir de un elemento, utilizamos nth-child(n+”valor numérico”). Si por ejemplo queremos añadir un estilo a cada elemento a partir de la tercera línea, tenemos que indicar n + 3, quedando así:
.listaCoches li:nth-child(n+3) {
background:#70b3ad;
color:#fff;
}
A todos los elementos después del tercero incluyendo este mismo se le aplicaría el estilo marcado. Ver ejemplo en JSfiddle.
See the Pen nth-child(n + X) by JVLDesign (@vazquezdesigner) on CodePen.
:nth-child(Xn+X)
Con esta propiedad indicamos cada cuantos elementos hay que aplicar el estilo. En X indicamos el elemento por el que queremos empezar, por ejemplo 2, y en Xn cada cuantos elementos después del 2 aplicamos el estilo, por ejemplo 3n. Esto aplicaría el estilo a los elementos 2, 5, 8, 11, 14… Ver en JSfiddle.
.listaCoches li:nth-child(3n+2) {
background:#70b3ad;
color:#fff;
}
See the Pen :nth-child(Xn+X) by JVLDesign (@vazquezdesigner) on CodePen.
:nth-child(-n+X)
Si por el contrario solamente queremos aplicar el estilo a algunos elementos empezando desde el primero, utilizamos -n+X. Si queremos aplicar el estilo hasta el 4 elemento, tendríamos que darle el valor -n+4.
.listaCoches li:nth-child(-n+4) {
background:#70b3ad;
color:#fff;
}
See the Pen :nth-child(-n+X) by JVLDesign (@vazquezdesigner) on CodePen.
Siempre tomará la referencia del valor que le indiquemos y restará el valor marcado en n. Si por ejemplo indicamos -3n+6, aplicará el estilo al elemento 6 y 3. Ver en JSfiddle.
Conclusión
Utilizar nth-child CSS es muy común ya que nos ayuda a aplicar estilos fácilmente sin tener que crear clases para cada elemento. Al principio puede parecer un poco lioso pero una vez que empiezas a probar con ejemplos verás que fácil resulta.
Quiero comentar también que en los valores de “n” siempre se puede colocar un valor numérico y así tendremos infinitas posibilidades de aplicar estilos a todos los elementos que necesitemos.
Preguntas y respuestas
nth-child es un selector en CSS que permite seleccionar elementos específicos de un conjunto de elementos, utilizando una fórmula matemática basada en su posición. Se utiliza para aplicar estilos a múltiples elementos en función de su posición en la jerarquía del DOM, utilizando la sintaxis «nth-child(n)» o fórmulas más complejas como «an + b». Esto proporciona flexibilidad para aplicar estilos a elementos específicos o a grupos de elementos según su posición.
Algunos ejemplos de uso de nth-child incluyen: 1) Seleccionar elementos pares o impares en una lista y aplicar estilos diferentes; 2) Aplicar estilos a elementos específicos en una tabla, como resaltar la primera columna o fila; 3) Seleccionar elementos en una galería de imágenes para aplicar estilos específicos a cada elemento; 4) Estilizar elementos en un menú de navegación, como resaltar el elemento actual o el último elemento.
Aparte de la sintaxis básica «nth-child(n)», también se pueden utilizar fórmulas más complejas como «an + b» para seleccionar elementos según un patrón específico. Por ejemplo, «2n» seleccionará todos los elementos pares, «3n + 1» seleccionará elementos cuya posición es 1, 4, 7, etc., y «4n – 1» seleccionará elementos cuya posición es 3, 7, 11, etc. Estas fórmulas permiten una mayor flexibilidad al seleccionar elementos según reglas más específicas.
