19

La pseudoclase :nth-child se suele usar en tablas o listados para diferenciar las filas pares de las impares:

li:nth-of-type(2n) {
  background-color: #ccc;
}
<ul>
  <li>elemento1</li>
  <li>elemento2</li>
  <li>elemento3</li>
  <li>elemento4</li>
</ul>

O para seleccionar un elemento hijo concreto:

li:nth-of-type(3) {
  background-color: #F00;
}
<ul>
  <li>elemento1</li>
  <li>elemento2</li>
  <li>elemento3</li>
  <li>elemento4</li>
</ul>

Sin embargo tiene una sintaxis más compleja, he visto casos de este estilo:

p:nth-child(4n+2)

No acabo de comprender muy bien que hace exactamente y qué usos prácticos puede tener.

1 respuesta 1

21
+100

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.

4
  • Qué bien que la pusieras en modo wiki de comunidad. Sin embargo, parece que fuiste el único editor, por lo que podrías haber mantenido la propiedad
    – fedorqui
    Commented el 8 ago. 2017 a las 12:03
  • Creo que solo le faltaría nth-first-child y nth-last-child para completar la respuesta. Por lo demás, muy completa. Commented el 27 ago. 2017 a las 11:55
  • @blonfu Dicho y hecho, ya están ambas pseudoclases añadidas ;) Commented el 27 ago. 2017 a las 13:13
  • 1
    @FranciscoRomero perfecto! Así está mejor
    – user7176
    Commented el 27 ago. 2017 a las 13:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.