Как закрасить вложенные элементы дерева с учетом их html иерархии?

Question

[Multu]

Приветствую всех! Сломал голову над решением на первый взгляд довольно простой задачи. Прошу помочь разобраться)

Суть в следующем. Есть 2 css класса: green и red. Требуется чтобы элементы дерева закрашивались по такой логике. Самые дальние (расположенные ниже по дереву) наследники имеют цвет ближайшего по иерархии родителя с установленным классом.

Для ясности покажу 2 примера html

В таком случае ссылки с текстом "3" и "2" должны быть окрашены в красный цвет, а ссылка с текстом "1" - в зеленый.

<ul>
     <li class="green">
              <a href="">1</a>
              <ul>
                      <li class="red">
                              <a href="">2</a>
                               <ul>
                                     <li> 
                                             <a href="">3</a>
                                     </li>
                                      ....
                               </ul>
                      </li>
              </ul>
     </li>
</ul>

В таком случае ссылки с текстом "3" и "2" должны быть окрашены в зеленый цвет, а ссылка с текстом "1" - в красный.

<ul>
     <li class="red">
              <a href="">1</a>
              <ul>
                      <li class="green">
                              <a href="">2</a>
                               <ul>
                                     <li> 
                                             <a href="">3</a>
                                     </li>
                                      ....
                               </ul>
                      </li>
              </ul>
     </li>
</ul>

Вот примерный css:

<style>
.green a { background-color: green }
.red a { background-color: red}
</stype>

Сейчас закрашивание элементов зависит от порядка строк в css, возможно ли как-то сделать так, чтобы закрашивание зависело не от порядка строк в css, а от иерархии html дерева (с учетом описанной логики)?

Вынес сюда для удобства ответы на вопросы из комментариев:
1. Количества цветов может быть не обязательно 2, может быть и больше
2. В дереве может быть много уровней вложенности, причем пользователь сразу же видит не всю структуру, а она динамически подгружается по мере его раскрытия
3. Нельзя использовать inline стили в html
4. Можно использовать js

Благодарю за внимание! Буду очень благодарен за помощь))

Comments

[Stalker_RED]

Уровней только три, или может быть и больше?
Если больше, можно ли использовать js?

[Multu]

Забыл упомянуть одно требование: нельзя использовать inline стили

[Multu]

Stalker_RED: Уровней может быть много. Причем они все не сразу же на странице, а могут динамически подгружаться по мере раскрытия дерева.
Да, насчет использования js никаких ограничений нету. У вас есть идеи как его можно тут использовать? Тоже смотрел в эту сторону, думал как-то анализировать дерево и проставлять через js свойства. Но то, что дерево динамическое - вставляет палки в колеса

Answer 1

[Stalker_RED]

.green a { background-color: green; }
.red a { background-color: red ;}
.red .green a { background-color: green; }
.green .red a { background-color: red ;}

https://jsfiddle.net/xkb9h04L/

Вариант на JS https://jsfiddle.net/xkb9h04L/1/

Comments

[Multu]

Спасибо! Подскажите, можно ли применить подобный css для 3х цветов? Надо будет прописать еще дополнительных 6 правил для всех вариаций размещения? Что если цветов будет 4 и более?
Решение вижу очень хорошим, вопрос в том, можно ли его еще как-то оптимизировать, чтобы подходило для большего кол-ва цветов?

[Stalker_RED]

Multu: решение на самом деле костыльное. Можно при помощи js переписать.

Answer 2

[Tony Realovich]

Может вам поможет эта статья: htmlbook.ru/samcss/dochernie-selektory

Comments

[Multu]

Спасибо! Изучил статью, но решения в ней я так и не увидел.

При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже...

Мне надо добиться такого решения, чтобы цвет зависел не от порядка строк в файле со стилями, а от иерархии в дереве.
Или вы ссылкой на статью намекаете, что моя задача невыполнима?

[Tony Realovich]

Вам придется указывать либо конкретные дочерние элементы, типа .green > a, .green > ul > li > a , либо переписывать наследуемые стили.

[Multu]

Указывать конкретные дочерние элементы - это самоубийство)) Так как дерево имеет неограниченную вложенность)
А что вы имеете в виду под фразой "переписывать конкретные наследуемые стили"? Использование свойства inherit?

Answer 3

[Screamie Di]

А как на счет background-color: inherit;?

Comments

[Multu]

Спасибо за ваш ответ!
Но боюсь что не подойдет способ такой. Ведь inherit работает только для прямого потомка. То есть чтобы его использовать, мне придется закрасить вначале всю структуру ul, а нужно именно ссылки, чтобы ничего лишнего не было