[html] Styling every 3rd item of a list using CSS?

Is it possible for me to style every 3rd list item?

Currently in my 960px wide div I have list of boxes which are floated left and are displayed in a 3x3 grid view. They also have a margin-right of 30px, but because the 3rd 6th and 9th list item has this margin it makes them jump down a row making the grid display wrongly

How easy is to make the 3rd 6th and 9th not have the margin-right without having to give them a different class, or is that the only way to do it?

This question is related to html css

The answer is


:nth-child is the answer you are looking for.


You can use the :nth-child selector for that

li:nth-child(3n) {
 /* your rules here */
}

Try this

box:nth-child(3n) {  
     ...
}

DEMO

nth-child browser support