Fórmula nth-child
En esta entrada voy a explicar mediante ejemplos sencillos la fórmula que podemos aplicar a la :pseudo-clase :nth-child, even y odd.
Desde aquí puedes ver la entrada completa de las :pseudo-clases estructurales.
Como os contaba en la entrada anterior dedicada a las :pseudo-clases, éstas tienen muchas cosas en común con los selectores de atributos.
Con ellas podremos apuntar a determinados elementos de nuestro código HTML sin la necesidad de emplear clases ni identificadores.
Antes de nada, voy a crear el esquema de la estructura DOM con la que trabajaremos los ejemplos.
<body>
<div>Esto es un texto de prueba para el elemento div 1</div>
<div>Esto es un texto de prueba para el elemento div 2</div>
<div>Esto es un texto de prueba para el elemento div 3</div>
<div>Esto es un texto de prueba para el elemento div 4</div>
<div>Esto es un texto de prueba para el elemento div 5</div>
<div>Esto es un texto de prueba para el elemento div 6</div>
<div>Esto es un texto de prueba para el elemento div 7</div>
<div>Esto es un texto de prueba para el elemento div 8</div>
<div>Esto es un texto de prueba para el elemento div 9</div>
</body>También he aplicado un estilo al body.
body{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
background-color:#666;
color:#ccc;
}:nth-child (n)
Con esta pseudo-clase podremos seleccionar mediante la posición, elementos hijos de una forma alterna.
Con este ejemplo seleccionaremos varios de los elementos div haciendo referencia a su posición con un número entero.
div:nth-child(2) {
color:#9FF;
}
div:nth-child(4) {
color:#F3F;
}
:nth-child (even)
Con este ejemplo seleccionaremos los elementos div que tengan una posición par, para esto empleamos la palabra even.
div:nth-child(even) {
color:#F3F;
}
:nth-child (odd)
Con este ejemplo seleccionaremos los elementos div que tengan una posición impar, para esto empleamos la palabra odd.
div:nth-child(odd) {
color:#9FF;
}
:nth-child (an+b)
Con este ejemplo seleccionaremos los elementos div que den como resultado de aplicar la fórumla (an+b).
El funcionamiento de esta fórmula viene a ser parecido a la estructura de programación for.
Obviamente no tiene nada que ver con ella, pero su funcionamiento es similar.
(an+b)
No olvidemos que esta fórmula se puede aplicar a las siguientes :pseudo-clases
:nth-child ( an+b )
:nth-last-child ( an+b )
:nth-of-type ( an+b )
:nth-last-of-type ( an+b )
a: es el ciclo o número de veces que deseamos que se repita.
n: es el contador que partirá de 0 y aumentará de 1 en 1 hasta el final de los elementos.
b: aumento.
Con este ejemplo seleccionaremos los elementos div impares mediante esta fórumla (an+b).
div:nth-child(2n+1) {
color:#9FF;
}Aplicando los siguientes valores en nuestra fórmula 2n+1, podríamos también seleccionar los impares.
Los cálculos serían estos.
(2*0) + 1 = 1
(2*1) + 1 = 3
(2*2) + 1 = 5
(2*3) + 1 = 7
(2*4) + 1 = 9
(2*5) + 1 = 11
Obviamente no tiene mucha lógica emplear esta fórmula para seleccionar los pares o impares. Pero sí cuándo queremos seleccionar por ejemplo 1 de cada 3, incluyendo en esta selección posiciones pares e impares.
div:nth-child(3n+1) {
color:#9FF;
}(3*0) + 1 = 1
(3*1) + 1 = 4
(3*2) + 1 = 7
(3*3) + 1 = 10
Esta fórmula puede tomar tantos valores como se te ocurran y seas capaz de dar utilidad.
Desde aquí
Puedes descargar un archivo con el código de estos ejemplos. Habrá código comentado para que puedas ir probando uno a uno.
La contraseña para descomprimir es: untitled.es
@eneakao
Pingback: Pseudo-clases estructurales CSS3 – Fórmula :nth-child | Recursos | Scoop.it