freefaller freefaller - 1 year ago 41
CSS Question

Using nth-child to cycle through items, but ignore the first item

Using CSS, is it possible to use

to repeat every 3 items, but ignore the first one in the list?

For instance, I need the first item in the list to have no specific colour1 then the items to cycle through red, green and blue.

Transparent | Red | Green | Blue | Red | Green | Blue | Red | Green | Blue

If the first item didn't have to be ignored, it would simply be the following...

li:nth-child(3n+1) { color:red; }
li:nth-child(3n+2) { color:green; }
li:nth-child(3n+3) { color:blue; }

But I can't figure out a CSS-only way of doing this while ignoring the first item

(1 - I'm from the UK)

Answer Source

Not far off, you wanted to use nth-child as opposed to first-child (first child is just for the first child).

li:nth-child(3n+2) roughly means every 3rd li starting from position 2 and li:nth-child(3n+3) means starting at position 3 so on and so forth.

li:nth-child(3n+2) {
  color: red;
li:nth-child(3n+3) {
  color: green;
li:nth-child(3n+4) {
  color: blue;

Not sure why being British is note worthy but I am too ;-)