title: How can I "zebra stripe" CSS columns?
body: <p>Let's say I have the following markup: </p>
  
  <pre><code>&lt;ul class="mycolumns"&gt;
      &lt;li&gt;Text&lt;/li&gt;
      &lt;li&gt;Text&lt;/li&gt;
      &lt;li&gt;Text&lt;/li&gt;
      ...
      &lt;li&gt;Text&lt;/li&gt;
      &lt;li&gt;Text&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the following CSS (assume prefixes):</p>
  
  <pre><code>.mycolumns {
      column-count: 3;
      column-gap: 10px;
  }
  </code></pre>
  
  <p>How can I "zebra stripe" the odd <strong>columns</strong>? Here's a <a href="http://jsfiddle.net/edelman/DV875/" rel="nofollow">fiddle</a> with what I assumed would be correct (note I'm using SCSS for my CSS)</p>