CSS nth-child 1-6, 7-12 и т.д.

Question

Я пытаюсь оформить детские предметы следующим образом

1,7,13 и т.д.

2,8,14 и т.д.

3,9,15 и т.д.

4,10,16 и т.д.

5,11,17 и т.д.

6,12,18 и т.д.

Какой синтаксис nth-child я могу использовать для достижения этой цели?

Answer 1

Вы можете использовать :nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3), :nth-child(6n+4) и т. Д.

Ссылки: http://w3.org/TR/css3-selectors/#nth-child-pseudo, http://w3.org/TR/css3-selectors/#selectors (спасибо @NayukiMinase)

Также очень хороший пример: Полезно: рецепты nth-child - CSS-хитрости

Answer 2

прочитайте объяснение, как nth-child работает здесь .

вы можете использовать 6n + x, где вы должны вставить соответствующие цифры для x.

Answer 3

Используйте это простое уравнение: nd + a

here a : first element index
     n : n
     d : difference

Example: 1,7,13
here a : 1
     n : n
     d : 6
    So the pseudo selector will be :nth-child(6n + 1)