n-й ребенок с автоматическим выбором цвета?

Question

У меня есть навигация с несколькими <li> элементами.

Каждый <li> имеет свой собственный класс (nav-1, nav-2 и т. Д.)

Теперь я хотел бы дать каждому классу различный цвет фона .

Есть ли способ сделать это в одном css-теге?

Потому что со временем мое меню будет расти, и я не хочу вкладывать руку в каждое изменение. То есть что-то вроде

color: #eee +X;

Answer 1

В CSS есть counters, однако невозможно получить значение счетчиков, используя attr(), а затем вставить это значение в calc().

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

li:nth-of-type(5n+1) { color:#000; }
li:nth-of-type(5n+2) { color:#333; }
li:nth-of-type(5n+3) { color:#666; }
li:nth-of-type(5n+4) { color:#999; }
li:nth-of-type(5n)   { color:#CCC; }

Или вы можете использовать javascript (возможно, jQuery) для выполнения этой работы.