title: Select every other element of class using css3
body: <p>Given an <code>ul</code> with a structure like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
      &lt;li class="spot"&gt;...&lt;/li&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
      &lt;li class="product"&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there any way using CSS3 to target every other occurance of a <code>li</code> with the class product.</p>
  
  <p>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.</p>