开发者

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

开发者 https://www.devze.com 2023-03-26 12:19 出处:网络
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

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)
0

精彩评论

暂无评论...
验证码 换一张
取 消