[SOLUCIONADO] ¿Rangos con nth:child?

[berkeleyPunk]

Hola!

Pues eso, ¿hay forma de establecer un rango con nth:child? Me parece que no, pero no está demás preguntar a la gente que sabe.

Por ejemplo, no sé, los elementos pares dados entre los elementos 7 y 17.

Saludos!

[PHPeros]

En teoría no se puede hacer con una única fórmula, necesitas dos para volver a poner como estaban los divs que se pasan del rango.

Supongamos que tienes 10 divs:

Código HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
 

Si quieres que se coloreen todos los pares que comprenden las posiciones 2 y 6 deberías hacer:

Código CSS:

div:nth-child(2n + 2){
    background: red;
}
 
div:nth-child(2n + 8){
    background: initial;
}
 

Ahí, la primera sentencia colorea todos los pares empezando de 2. La segunda descolorea todos los pares desde 8, el siguiente número par a 6. No sé si me explico

[berkeleyPunk]

Iniciado por PHPeros

En teoría no se puede hacer con una única fórmula, necesitas dos para volver a poner como estaban los divs que se pasan del rango....

Sí, te explicaste bien.
Buen truco. Aunque qué mal que no haya posibilidad de rangos, como tales .

Saludos y gracias.

[pzin]

Pues también pensé que no podía hacerse, al menos sin hacerlo demasiado guarro, pero sí que se puede. Solo hay que encadenar :nth-child()'s ahí a lo loco:

Código CSS:

div:nth-child(n+7):nth-child(even):nth-child(-n+17){}
 

Y si te queda tiempo, aún puedes hacer más cosas locas con :nth-child().

[berkeleyPunk]

Iniciado por pzin

Pues también pensé que no podía hacerse, al menos sin hacerlo demasiado guarro, pero sí que se puede. Solo hay que encadenar :nth-child()'s ahí a lo loco...

Bueno, revisé la página que indicas, y veo que encadenar a lo loco, pues no tanto. Todo tiene mucho sentido.

Pero, maestro pzin, excelentísimo aporte.

Saludos y gracias.