Front.id

Nuestro amigo, el selector nth-child, es una herramienta que nos brinda mucho juego a la hora de maquetar una amplia variedad de componentes, por ejemplo desde un menú hasta una grilla.

En esta oportunidad vamos a ver diferentes formas de sacarle el jugo a su uso.

Tomaremos este ejemplo:

:nth-child(entero)

 Utilizando :nth-child(2) podemos seleccionar un elemento por el orden que tiene dentro de su contenedor:

.nth-example li:nth-child(2) {
  background: #7cedea;
}

Resultado:   

Le pasamos al selector un argumento entero y esto nos permite seleccionar un elemento (el segundo en este caso), pero también podríamos pasarle alguna de las palabras clave "odd" o "even" como veremos en el siguiente ejemplo.

 

:nth-child(odd/even)

Con estas palabras claves podemos hacer una selección de los elementos pares (even) o impares (odd):

.nth-example li:nth-child(odd) {
  background: #7cedea;
}

Resultado:   

Utilizando "odd" hemos seleccionado los elementos impares, esto por ejemplo, nos sirve mucho a la hora de maquetar una grilla o como en este caso un elemento con otros anidados en su interior:

<div class="grid-wrapper clearfix">
    <div></div>
    <div></div>
</div>

En este caso tenemos dos elementos y queremos flotar uno a cada lado y a la vez aplicarles un color:

/* Esto es común para ambos <div> */
.grid-wrapper > div {
  width: 50%;
  height: 50px;
}

/* Ahora vamos a flotar un elemento a la izquierda y el otro a la derecha, dándoles un diferente color de fondo */
.grid-wrapper > div:nth-child(odd) {
  float: left;
  background: red;
}

.grid-wrapper > div:nth-child(even) {
  float: right;
  background: blue;
}

Resultado: 

 

Pero que pasaría si tuviéramos este caso:

y quisiéramos seleccionar un elemento cada tres que en este caso serian el elemento 3, 6 y 9.

Para esto :nth-child() nos permite utilizar formulas como argumento.

 

:nth-child(fórmula)

Este es el código que necesitaríamos para lograr nuestro objetivo anterior:

.grid-wrapper > div:nth-child(3n+3) {
  background: red;
}

Pero como funciona esto?

Al principio puede parecer algo abstracto, pero vamos a profundizar un poco en su lógica desmenuzando la formula (3n+3).

Tendríamos: (3(un valor entero) n(literal que representa una expresión algebraica) +(operador matemático) 3(un valor entero)).

Cuando declaramos (3n...) lo que en realidad estamos diciendo es: 3xn y acá se plantea una incógnita, cual es el valor de "n"?

Es necesario que pensemos en "n" como en un comodín cuyo valor inicial es cero y que con cada iteración su valor aumenta en 1.

De esta forma nuestro (3n...) seria:

3x0...

3x1...

3x2...

y si completamos nuestra fórmula nos quedaría:

3x0 + 3 = 3

3x1 + 3 = 6

3x2 + 3 = 9

Así tenemos seleccionados el tercero, sexto y noveno elemento.

** Algo importante a tener en cuenta es que los operadores que podemos pasar dentro de la fórmula son "+" y "-".

 

Con esto ya tenemos una amplia gama de posibilidades, solo es cuestión de jugar un poco hasta cubrir nuestras necesidades.