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)

I looked around and it seems like you cannot target the columns via a pseudo-selector, even on Webkit. — Blender, Aug 10 '12 at 03:46

score 1 · Answer 1 · answered Aug 10 '12 at 03:55

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);
}

answered Aug 10 '12 at 03:55

Blender

289,723
53
439
496

...meh. while this would work if i absolutely needed it to, i'm looking for a css solution. i can accept the fact that there is none if that's indeed the case. – Jason Aug 10 '12 at 03:58

How can I "zebra stripe" CSS columns?

1 Answers1