Style every third element?

Question

How can I style every third element with plain CSS.

I have seen questions like this, but they involve javascript. I want a plain CSS solution. I know I can use

Answer 1

IE Support via Libraries

If it is IE support you are looking for, there is a wonderful library called Selectivzr that enables CSS3 selectors on IE versions 6-8.

Hack that doesn't help IE, but is done without use of :nth-child

Otherwise all I can offer is an ugly hack using the + adjacent sibling selector (Defined by CSS2 standards, but not available by default in IE8 or below)

div {
    width: 40px;
    height: 40px;
    background-color: blue;
}

div + div,
div + div + div + div + div { width: 100px }

div + div + div + div,
div + div + div + div + div + div + div { width: 40px }

JSFiddle

This pattern could be generated with most CSS Precompilers (ie SASS), but is limited by the amount of elements you wish to have.

Conclusion

If all you're looking for is IE support; then I strongly recommend using a library such as Selectivzr. This will spare you some IE6-8 headaches.

If I have any epiphanies in regards to a better solution, I'll post.