Как я могу "полоса зебры" CSS столбцы?

Question

Допустим, у меня есть следующая разметка:

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

И следующий CSS (примите префиксы):

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

Как я могу "полоса зебры" нечетные столбцы? Вот скрипка с тем, что я предположил, будет правильным (обратите внимание, я использую SCSS для моего CSS)

Answer 1

Если вы не можете сделать это с помощью CSS, jQuery всегда может вам помочь.

Вы можете использовать плагин jQuery Columnizer для выполнения той же задачи, но, поскольку он оборачивает столбцы в реальные элементы, вы можете настроить таргетинг на отдельные столбцы с помощью CSS:

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