Как для каждого блока задать свой цвет?

Question

[Максим Иванов]

Вчера я задавал вопрос, но без верстки нет особого смысла вдумываться об идее
Я выложил верстку тут:
https://jsfiddle.net/kLfzb1nd/

Есть дерево элементов, вложенность может быть огромной, но я не понимаю, как унифицировать задачу

Parent1
---Child1
------Child1-Child1
------Child1-Child2
---Child2

Parent2

Parent3

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

Реальная ситуация такая, дело в том, тут непонятно кто является родителем дочернего элемента (если делать внутренние margin, то инпуты едут)

Такое же можно заметить и в верстке на jsfiddle


Непонятно, как дочерние элементы соотносятся с родительскими блоками, поэтому было предложено уменьшать у дочерних элементов альфа-канал больше, но опять же, как это сделать на CSS?

Comments

[Павел Воронюк]

К Parent1, Parent2... я так понимаю нет возможности добавить еще один класс?

[Максим Иванов]

нет, нельзя

Answer 1

[GreatRash]

Можно эмулировать если задать бекграунд с альфой: codepen.io/GreatRash/pen/gwYKJk

Comments

[Максим Иванов]

255,248,224 для моего цвета, практически не заметно ((

[Максим Иванов]

но решение гениальное

Answer 2

[atis //]

Сомнительная идея.
Например у вас основной цвет желтый. Какой цвет будет у 5, 6 элемента? Скорей всего болотный или цвета г. Ну или очень светлый. Вам либо нужно знать вложенность ну или цвета будут всегда одинаковые что есть наилучший вариант.

На SASS:
Stackoverflow

Comments

[Максим Иванов]

То есть надо пытаться как-то rgb палитру менять? исходя из моего цвета
jsfiddle.net/3p3s9moz

[atis //]

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

Answer 3

[sergski]

В sass есть циклы и функции для работы с цветом, с помощью которых несложно решить задачу создания классов для раскрашивания таких меню. Но, у вас количество родителей и вложеностей детей неопределенная и в этом проблема. Допустим, можно задать избыточное количество, но градаци цветов станет очень близкой. Те имхо в вашем случае можно попробовать подобрать достаточное число для покрытия потребностей числе родителей/детей при различимости в цветовых переходах.
+ вот хорошая статья