La pseudoclase :nth-child()
selecciona los hermanos que cumplan cierta condición definida en la fórmula an + b
. a
y b
deben ser números enteros, n
es un contador. El grupo an
representa un ciclo, cada cuantos elementos se repite; b
indica desde donde empezamos a contar.
Vamos a verlo con ejemplos para entenderlo mejor:
Seleccionar cada tres elementos empezando por el segundo:
:nth-child(3n + 2)
#contenedor :nth-child(3n + 2){
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar cada tres elementos:
:nth-child(3n + 0)
Cuando b=0
se puede omitir quedando:
:nth-child(3n)
#contenedor :nth-child(3n){
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar el segundo elemento:
:nth-child(0n + 2)
Cuando a=0
se puede omitir an
y nos queda:
:nth-child(2)
#contenedor :nth-child(2){
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar cada dos elementos hasta el sexto:
También podemos usar números negativos. Cuando a
es negativo solo se repite el ciclo hasta b
:
:nth-child(-2n + 6)
#contenedor :nth-child(-2n + 6){
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar todos los elementos hasta el sexto:
si a=1
o a=-1
podemos omitir a
:
:nth-child(-n + 6)
#contenedor :nth-child(-n + 6){
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar el primer elemento:
Si lo que quisiéramos fuera seleccionar el primer elemento podemos utilizar la pseudoclase first-child
, una pseudoclase específica para este propósito.
Equivaldría a utilizar cualquiera de las siguientes pseudoclases:
nth-child(0n+1)
nth-child(1)
#contenedor p:first-child{
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar el último elemento:
De igual manera, también podemos seleccionar el último elemento mediante la pseudoclase last-child
:
#contenedor p:last-child{
border:solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Palabras clave:
Para seleccionar elementos pares e impares también tenemos las palabras clave odd
y even
:
:nth-child(odd)
:nth-child(even)
#contenedor :nth-child(odd){
border:solid 1px red;
}
#contenedor :nth-child(even){
border:solid 1px blue;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
Seleccionar el enésimo elemento de un tipo concreto:
A veces ocurre que queremos seleccionar, por ejemplo, el segundo párrafo hijo de un div
que tiene varios elementos-hijo distintos e intentamos algo así:
p:nth-child(2)
#contenedor p:nth-child(2) {
border: solid 1px red;
}
<div id="contenedor">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
<div>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</div>
<p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
<p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
<div>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</div>
<p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
<div>Laborum sed facere magni blanditiis sit id vel enim voluptas.</div>
<p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
<p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
<p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>
No funciona porque p:nth-child(2)
busca el segundo hijo que además sea un p
y como el segundo hijo no es un p
no se cumple la condición y no hace nada.
¿Se podría hacer eso de alguna forma? Sí, pero con otra pseudoclase llamada :nth-of-type()
que funciona básicamente igual pero solo cuenta los elementos del tipo elegido.