CSS nth-child 1-6, 7-12, etc

I'm attempting at styling children items as follows

1,7,13,etc

2,8,14,etc

3,9,15,etc

4,10,16,etc

5,11,17,etc

6,12,18,etc

What nth-child syntax can I use to achieve this?开发者_如何学JAVA

You can use :nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3), :nth-child(6n+4) etc..

References: http://w3.org/TR/css3-selectors/#nth-child-pseudo , http://w3.org/TR/css3-selectors/#selectors (thanks @NayukiMinase)

Also, a very good example is here: Useful :nth-child Recipes - CSS-Tricks

read the explanation how nth-child works here.

you can use 6n+x, where you have to insert appropriate numbers for x.

Use this simple equation : 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)