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

Question

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?

Answer 1

Yes, you can use what's known as :nth-child selectors.

In this case you would use:

li:nth-child(3n) { // Styling for every third element here. } 

:nth-child(3n):

3(0) = 0 3(1) = 3 3(2) = 6 3(3) = 9 3(4) = 12 

:nth-child() is compatible in Chrome, Firefox, and IE9+.

For a work around to use :nth-child() amongst other pseudo-classes/attribute selectors in IE6 through to IE8, see this link.

Answer 2

You can use the :nth-child selector for that

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