Cómo usar nth-child

Facebook
Twitter
LinkedIn
WhatsApp

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.

Facebook
Twitter
LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio