Nth-child combination to skip 2, and then select 3

Question

I would like to know the nth-child() value of this:

1 2 3 4 5 6 7 8 9 10

I searched in many links, such as : nth Tester , Mastery: nth-child , but cann Don't find the combination I need.

I also tested my combination on this CSS3: nth-child calculator , it shows the combination as follows:

 :nth-child(n+3):nth-child(-n+5):nth-child(n+8):nth-child(-n+10):nth-child(n+13) 

Can anyone help me achieve this?

Answer 1

web ticks answered well, however you can achieve this even shorter by using :not() :

 li:not(:nth-child(5n+1)):not(:nth-child(5n+2)){ background:gold; border:1px solid green; } 

 <ol> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ol> 

Answer 2

You can combine several nth-child() selectors to achieve your goal:

 li:nth-child(5n+3), /* Will select 3, 8, 13, 18... */ li:nth-child(5n+4), /* Will select 4, 9, 14, 19... */ li:nth-child(5n+5) /* Will select 5, 10, 15,20... */ { background:gold; border:1px solid green; } 

 <ol> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ol>