Select every other element of class using css3

Question

Given an ul with a structure like this:

<ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

Is there any way using CSS3 to target every other occurance of a li with the class product.

I've tried using both nth-of-child and nth-of-type in various configurations to no luck, both seem to target every other li element regardless of the class is has.

Answer 1

Basically, you can't with plain CSS3. The nth-child selectors work on element selectors, not classes. So, li:nth-child(even) works, but .product:nth-child(even) does not.

You will need jQuery to achieve this.