Padding from the 5th child element + CSS

Question

I have ul with for example 15 child li elements. The width and height from every li is the same. There are 4 li elements on one row. No I would like to have the elements starting with the fifth child element to have a padding of 20px. Can I do this with a css selector or do I need to use a check to add a class beginning from the fifth element?

Answer 1

Using :nth-child pseudo-class this can be done easily:

ul li:nth-child(n+5) {
    background:#ff0000;
}

JSFiddle:

http://jsfiddle.net/CVuBK/2/

Answer 2

Use :nth-child() pseudo-class. It will affect 5th li elements onwards

ul li:nth-child(n+5) {
    padding: 20px;
}

Fiddle

Answer 3

You can try

ul li:nth-child(5) {  
  padding: 20px;
}

Answer 4

Fix for Dan Meehan answer: works perfectly with good html ;) http://jsfiddle.net/CVuBK/1/

<h1>