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

Answer 1

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

Answer 2

Try this

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

DEMO

nth-child browser support

Answer 3

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 4

You can use the :nth-child selector for that

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