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

This cannot be done with plain CSS (in any way that I yet know of), however a plain-JavaScript solution is pretty simple:

var​ lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}​

JS Fiddle demo.

jQuery could be used instead (as could, presumably, any other JavaScript library), but it’s certainly not required.