Чередование цветов элементах списка с вложенными списками

[Koloyar]

Добрый день! Столкнулся с интересной задачей, и уже некоторое время не могу найти для нее красивого решения.

 

Суть задачи: имеется список ul, каждый его подпункт li имеет div с текстовой строкой и таким же списком ul. Этакая рекурсия. И хочется чтобы цвета li (а точнее вложенного в него блока с текстом) чередовались через один (как это часто делают для строк таблицы)

Для li, лежащих в одном списке, проблема не стоит: li:nth-child(2n) {background: color1;}  li:nth-child(2n+1) {background: color2;}

Но они то лежат в разных, а чередование цветов должно быть все равно.

 

Вот заготовка, к тому о чем я говорю: http://jsfiddle.net/q1p1abaj/

 

Первая мысль была реализовать через опорные классы: в списке класса .first-color цвета элементов чередуются так:  .first-color > li:nth-child(2n) {background: color1;}  .first-color > li:nth-child(2n+1) {background: color2;} А в классе  .second-color наоборот:  .second-color > li:nth-child(2n) {background: color2;}  .second-color > li:nth-child(2n+1) {background: color1;}

И вот так выглядит это решение http://jsfiddle.net/Lx6n3o4n/  Собственно именно такой вид хотелось бы получить в результате, но без использования классов.

 

Но это решение на самом деле плохое, потому что если список расширяется динамически или, что еще хуже, пункты (li) должны иметь возможность перемещаться из одного ul в любой другой, придется каждый раз менять классы first- и second- color в зависимости от того в каком они сейчас находятся элементе - четном или не четном.

 

Поэтому я прошу совета, может кто-нибудь сможет решить задачу "раскрашивания" пунктов списков на css без использования классов.

[Z1gnet]

http://jsfiddle.net/q1p1abaj/1/ ну как-то так. возможно можно более оптимально сделать

[psywalker]

http://jsfiddle.net/q1p1abaj/1/ ну как-то так. возможно можно более оптимально сделать

Во-первых, этот вариант не является решением, ибо, добавив для примера лишний пункт, всё ломается.

А, во-вторых, раз уж элементы будут меняться динамически, то значит в деле будет участвовать жс, следовательно я бы не стал заморачиваться и написал бы пару строк жс-а ради решения поставленной задачи.

[Koloyar]

Благодарю за ответы!

 

Z1gnet, интересная реализация, но как справедливо заметил psywalker - лишний пункт и все ломается (Хотя если честно, еще не давно меня бы устроило такое решение - до сих пор ни разу не возникла ситуация когда четность/нечетность последнего дочернего элемента не была бы противоположной следующему за родителем пункту, но это разумеется случайность).

 

psywalker,  js конечно решение проблемы, но запускать при каждом изменении дерева полное его перешерстривание с расстановкой нужных классов мне кажется очень громоздким выходом из проблемы (хотя возможно он окажется единственным)

 

Я все таки надеюсь на css и вот почему: если использовать counter и выводить его значение в ::before, то он верно расставляет номера для li в не зависимости от того к каким родителя они принадлежат. Вот что я имею ввиду: http://jsfiddle.net/q1p1abaj/4/

Очень хотелось бы понять можно ли привязаться к четности/нечетности этих номеров или определять ее каким-то похожим образом?