Nth-child с модулем (или модулем)

Можно ли использовать nth-child с модулем? Я знаю, что вы можете указать формулу, например

nth-child(4n+2)

Но я не могу найти, если есть модуль-оператор. Я пробовал следующие примеры ниже, и ни один из них не работает:

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

Ответы

Ответ 1

Нет, :nth-child() поддерживает только сложение, вычитание и коэффициент умножения.

Похоже, вы пытаетесь забрать первые 6 элементов (поскольку n mod 7 для любого положительного целого n дает вам только 0 до 6). Для этого вы можете использовать эту формулу:

:nth-child(-n+6)

Отрицая n, подсчет элементов выполняется назад, начиная с нуля, поэтому эти элементы будут выбраны:

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

jsFiddle demo

Ответ 2

Если вы хотите использовать nth-child с модулем k, просто укажите:

nth-child(kn)

Например, если вы хотите указать стиль для элементов 3, 6, 9,.., просто укажите (k= 3) и используйте:

nth-child(3n)

Вы также можете указать смещение:

nth-child(kn+offset)

Ответ 3

Я знаю, что эта тема очень старая, но вот ответ, достаточно близкий к модулю оператора:

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

Это позволит выбрать элементы 1-6, 8-13 и т.д.

:nth-child(an)

Приведенный выше код выберет элементы, делящиеся на "a", поэтому добавление: not() селектор заставляет CSS выбирать элементы, не делящиеся на "a".

Я надеюсь, что кто-то найдет это полезным;)