Using nth-child to style item 4 and onwards


I have a list item where I'd like the 4th item and onwards to have a different background-color.

I've tried the following:

li:nth-child(4) { background-color:blue; }

This styles only the 4th item. I then tried the following in the hope that it would style 4th item and onwards, but it didn't work:

li:nth-child(4+) { background-color:blue; }

How can I get this to work without having to specify 4th, 5th, 6th, 7th etc...?

Problem courtesy of: Curt


Use :nth-child(n+5) (CSS indexes start at 1).


li:nth-child(n+5) {
Solution courtesy of: Rob W


You need to do this

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


Discussion courtesy of: Jason Gennaro

This recipe can be found in it's original form on Stack Over Flow.