Цвета чередующихся строк в CSS3 с изменением DOM

Question

Я использую следующий css для чередования цвета фона элементов li, но нужно, чтобы css поддерживался, если строки получают присвоенный им класс .hidden (класс .hidden отображается: none;).

ul li:not(.hidden):nth-child(odd) {
    background: #fff;
}

ul li:not(.hidden):nth-child(even) {
    background: #f4f4f4;
}

Есть идеи, как сохранить чередующиеся цвета при добавлении / удалении элементов li в / из ul? Пожалуйста, дайте только решение на основе CSS, если это возможно. Возможно, мне придется сделать это в JS, но я бы предпочел не делать этого!

Приветствия

Answer 1

Из-за того, как работает псевдокласс :not(), его нельзя использовать для фильтрации элементов из DOM, чтобы получить подмножество элементов, к которым применяются стили. См. этот ответ для подробностей.

РЕДАКТИРОВАТЬ: Очевидно, мое решение ниже также не должно работать. Мне нужно отдохнуть от ответов на вопросы или что-то в этом роде. Так что я думаю, что единственный другой возможный путь - это сделать это с помощью JavaScript. Я держу этот пост здесь вместо того, чтобы удалять, так как я не хочу снимать комментарии с ним.

С этой целью, если вы можете изменить HTML, вы можете вместо этого использовать класс, который является общим для всех ваших li s, и нацеливаться на него вместе с :nth-of-type():

ul li.shown:nth-of-type(odd) {
    background: #fff;
}

ul li.shown:nth-of-type(even) {
    background: #f4f4f4;
}

Answer 2

Что если вы изменили свой .hidden на следующий

.hidden {height:0px; overflow:hidden}

Я вообще не тестировал этот код, но элементы все еще будут в DOM для манипуляции, но не должны быть видимы дляпользователь.