css - w3org - www w3 org tr html52

nth-child con mod(o modulo) operador

Question

¿Es posible usar el nth-child con módulo? Sé que puedes especificar una fórmula, como

nth-child(4n+2)

Pero parece que no puedo encontrar si hay un operador de módulo. He intentado los siguientes ejemplos a continuación, y ninguno parece funcionar:

nth-child(n%7)
nth-child(n % 7)
nth-child(n mod 7)

Answer 1

No :nth-child() solo admite la suma, resta y multiplicación de coeficientes .

Supongo que está intentando captar los primeros 6 elementos (como n mod 7 para cualquier entero positivo n solo le da 0 a 6 ). Para eso, puedes usar esta fórmula en su lugar:

:nth-child(-n+6)

Al negar n , el conteo de elementos se realiza hacia atrás comenzando desde cero, por lo que estos elementos se seleccionarán:

 0 + 6 = 6
-1 + 6 = 5
-2 + 6 = 4
-3 + 6 = 3
-4 + 6 = 2
-5 + 6 = 1
...

demo jsFiddle

Answer 2

Sé que este tema es muy antiguo, pero aquí está la respuesta que es lo suficientemente cercana al operador de módulo:

:not(:nth-child(7n))

Esto seleccionará los elementos 1-6, 8-13 y así sucesivamente ...

:nth-child(an)

El código anterior seleccionará elementos divisibles por "a", por lo que al agregar: no () el selector obliga a CSS a seleccionar elementos no divisibles por "a".

Espero que alguien lo encuentre útil;)

Answer 3

Si desea utilizar nth-child con módulo k , simplemente especifique:

nth-child(kn)

Por ejemplo, si desea especificar el estilo para 3, 6, 9, .. elementos, solo especifique ( k = 3), y use:

nth-child(3n)

También puede especificar un desplazamiento:

nth-child(kn+offset)