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 have searched in many references like :nth Tester, Mastering the :nth-child but couldn't find the combination I need.

I have also checked my combination on this CSS3 :nth-child Calculator, it shows the combination like this:

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

Could anybody help me out to achieve this?

Answer 1

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

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>

Answer 2

web-tiki answered good, however, you can achieve it even shorter, 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>