CSS Selectors: nth-child

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).

Sintaxis

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:

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;
}

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;
}

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;
}

Compatibilidad con navegadores

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