Saltar al contenido
CSS

Cómo usar nth-child

ejemplos de nth-child

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.

first child
li:first-child {
        background: red;
    }

last-child

Vamos a poner un fondo de color rojo al último elemento de la lista.

last child
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.

nth child
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.

nth child
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.

nth child
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
– 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.

nth last child
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.

nth-child odd
li:nth-child(odd) {
        background: red;
    }

Pares

nth-child even

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.