Every 5th child with nth-child [duplicate]

Question

I need to apply a style to every 5th li, including the first li.

I have tried:

nth-child(1n+5)

But this does not apply it to the first child. Where am I going wrong?

Answer 1

Other way around; you’re looking for :nth-child(5n+1).

The first number is the multiplier (in this case every 5th item) and the second number the offset. The offset is 1 because you want to start at the first item - if you left it off it’d start on the 0th and then show on the 5th.

Answer 2

You can select every 5th element with nth-child(5n+5) and then also select first li with li:nth-child(1) or li:first-child

li:nth-child(5n+5), li:nth-child(1) {
  background: blue;
}

<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>
</ol>