Несколько классов у одного тега, и его индивидуальность.

[TheKIP]

В шаблоне есть меню созданное на основе тегов ul li, которое растянуто горизонтально с помощью float:left.

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

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

Сложность состоит в том, что заказчик хочет что бы активный пункт меню выделялся другим фоном (по умолчанию кнопка черная, при активности становится оранжевой), и джумла умеет в коде отделять активный элемент и делает она это прикрепляя дополнительный идентификатор current и доп. класс active.

А теперь собственно задача: необходимо что бы и у подсвеченного элемента был УНИКАЛЬНЫЙ фон.

Мы имеем код:

<ul class="menu">
<li id="current" class="active item2"><a href="#">Кафе, бары</a></li>
<li id="current" class=" item3"><a href="#">Рестораны</a></li>
<li class="item4"><a href="#">Ночные клубы</a></li>
</ul>

CSS:

/*Фон элементов меню*/
li.item2 {width:93px; background:url(images/menu_item1.png) no-repeat;}
li.item3 {width:94px; background:url(images/menu_item2.png) no-repeat}
li.item4 {width:138px; background:url(images/menu_item3.png) no-repeat}

/*Активные (в данном случае селекторы внизу, абсурдны, я просто пытался методом подбора, узнать рабочую комбинацию*/
li#current li.item2 { background: url(images/menu_item_active1.png)}
li#current li.item3{ background: url(images/menu_item_active2.png)}
li#current li.item4 { background: url(images/menu_item_active3.png)}

Из этого кода видно что активная кнопка имеет 2 класса active и item2, и один идентификатор current

Но в CSS я не могу конкретно задать этот объект (я незнаю как).

Можно создать отдельный селектор в CSS #current, и тогда будут применяться все стили, класса li.item2, и стили id#current, но это будет не уникально, т.к. класс current будет один на всех.

Короче нужно как то кокретно в CSS указать именно на этот активный элемент.

*Извинити если каряво написал, чесно не представляю как это объяснить словесно*

PS

test.thekip.ru самое верхнее меню.

[3ABAPKA]

ul.menu li.active {фон}

или

li.active {фон}

или

.active {фон}

[TheKIP]

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

[rus]

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

У меня к стати, подобная проблема с меню на джумле

Edited October 8, 2009 by rus

[s0rr0w]

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

У меня к стати, подобная проблема с меню на джумле

Садись, два.

.red { color: red }
.green { color: green }

<span class="green red">Это зеленый текст</span>

Порядок следования классов в атрибуте class не играет роли.

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

.item2.active

[rus]

Порядок следования классов в атрибуте class не играет роли.

В атрибуте не играет - проверил это так, а вот в самом файле стилей, или в хедере да, имеет.

Я поменял местами:

.green { color: green }

.red { color: red }

и в итоге текст теперь красный - магия?

Edited October 8, 2009 by rus

[s0rr0w]

и в итоге текст теперь красный - магия?

Нет, не магия. Порядок стилей в файле имеет огромное значение.

[rus]

Нет, не магия. Порядок стилей в файле имеет огромное значение.

Буду иметь ввиду.

[Justnewone]

.item2.active

Если для кого актуально, то IE6 превращает такой селектор просто в .active

[psywalker]

Если для кого актуально, то IE6 превращает такой селектор просто в .active

Да, знаем такую штуку, но я кстати таким вот макаром углы меняю у боксов, ИЕ6 не подводил ещё, видимо фортило)))