Image for post
Image for post

nth-child es una pseudoclase que puede resultarnos muy útil al momento de seleccionar ciertos elementos de nuestro HTML.

Hay que tener en cuenta que, como su nombre indica, nos permite seleccionar elementos hijos (child) basándonos en la posición que tengan dentro de su padre (parent).

Podríamos decir que su uso se parece a una función, ya que espera que le pasemos parámetros. Ej.:

li:nth-child(an+b) { };

En este ejemplo estamos usando como target nuestro elemento <li>. El uso de parámetros se compone de lo siguiente:

(an+b)

Con la letra b, luego del signo de suma (+), le indicamos a partir de qué elemento queremos hacer la selección.

La letra n podríamos decirse que es como un contador, es un valor que siempre será n y que nosotros tendremos que usar.

Y por último, la letra a hace referencia a cada cuántos elementos queremos hacer la selección.

Esto lo vemos mejor con un ejemplo. Teniendo este HTML:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ul>

Si queremos seleccionar a partir del elemento 3, hasta el último elemento, con CSS el uso de nth-child sería:

/* Al ser cada un elemento, no necesitamos indicarle un número antes de la letra 'n'. Con lo cual esto se lee: selecciona a partir del elemento 3, uno a uno. */li:nth-child(n+3) {
background-color: green;
}

Dándonos como resultado:

Image for post
Image for post

Si quisiéramos seleccionar el número 3 y 5, es decir, cada dos números:

/* Selecciona a partir del elemento 3, cada 2 */li:nth-child(2n+3) {
background-color: green;
}
Image for post
Image for post

Por último, podemos querer seleccionar elemento hacia atrás. Es decir, si quisiéramos que la selección sea desde el principio hasta el elemento 3 usaríamos números negativos:

/* Selecciona a partir del 3, hacia atrás */li:nth-child(-n+3) {
background-color: green;
}
Image for post
Image for post

El mismo caso si queremos seleccionar hacia atrás, pero cada 2 elementos:

/* Selecciona a partir del 3, hacia atrás cada 2 elementos */li:nth-child(-2n+3) {
background-color: green;
}
Image for post
Image for post
Image for post
Image for post

Espero que sirva como una pequeña introducción y a un mejor entendimiento de cómo se usa esta útil pseudoclase en CSS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store