Как оформить элементы списка в соответствии с их порядком

Question

У меня есть меню из списка li.Каждый элемент li должен иметь свой цвет фона в соответствии с его положением в списке:

Первый элемент розовый,
второй оранжевый,
третий зеленый,
и так далее ...

Каждый элемент имеет свой собственный идентификатор, так что, предположительно, нет проблем, чтобы дать каждому свой стиль CSS.(Например, идентификатор первого элемента - это menu-item-30, идентификатор второго элемента - menu-item-57 и т. Д. Со случайными числами в качестве идентификаторов.)

Однако предполагается, что сайтработать на разных языках, и на каждом из этих языков элементы списка имеют разные идентификаторы.(Например, пункт с идентификатором menu-item-30 в английском меню имеет идентификатор menu-item-241 во французском меню.)

Интересно, можно ли это сделать только путемдобавление идентификаторов к правилам CSS, например:

#header #access li.menu-item-30,
#header #access li.menu-item-210, /*spanish*/
#header #access li.menu-item-241 /*french*/{
/*add header prefix to li's only'*/
   background: url('images/headers/navbar.png') 0 -124px repeat-x transparent;
   border-bottom: 3px solid #f26122;

}

Или, если есть способ - , который будет работать в IE7 и выше - использоватьболее общее правило, такое как nth-child или подобное.

Answer 1

Есть один способ. Вы можете добавить атрибут rel="home" для элемента, а затем с помощью css вы сможете сделать это: #header #access li a[rel="home"] { }

Если у вас нет доступа к коду, единственный способ - написать css для каждого элемента.