Styling every 3rd item of a list using CSS?
css, html
Solution
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.
Problem
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?