How can I "zebra stripe" CSS columns?

Question

Let's say I have the following markup:

<ul class="mycolumns">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    ...
    <li>Text</li>
    <li>Text</li>
</ul>

And the following CSS (assume prefixes):

.mycolumns {
    column-count: 3;
    column-gap: 10px;
}

How can I "zebra stripe" the odd columns? Here's a fiddle with what I assumed would be correct (note I'm using SCSS for my CSS)

Answer 1

In case you can't do it with CSS, jQuery can always help you.

You can use the jQuery Columnizer Plugin to perform the same task, but since it wraps the columns in actual elements, you can target the individual columns via CSS:

.column:nth-child(odd) {
  background-color: rgb(255, 200, 200);
}