Uso practico del selector :nth-child()
21/11/2017 por Casanova

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:

listado

: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:   

001

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:   

002

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: 

003

 

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

004

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.

Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

HTML Restringido

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.