CODEWITHSUNDEEP
csscss-selectors
Curtis
Curtis

Reputation: 103428

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...?

Upvotes: 30

Views: 24520

Answers (2)

Rob W
Rob W

Reputation: 349262

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

Demo: http://jsfiddle.net/nTZrg/1/

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

Upvotes: 65

Jason Gennaro
Jason Gennaro

Reputation: 34863

You need to do this

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

Example: http://jsfiddle.net/jasongennaro/2p4e9/1/

Upvotes: 3

Related Questions