Почему не работает псевдокласс active для отдельного нажатого пункта меню ?

Question

[Vldmr]

Задача - заменить в меню текст на графические кнопки.
CMS - wordpress. Шаблон Fruitful.
В разделе Внешний вид - меню каждому пункту меню присвоил класс. Допустим menu-1.
В настройках шаблона есть раздел css куда можно прописывать свои настройки.
Вот код css для изменения стиля отдельного пункта меню:

.menu-1 a{
background-image: url(mage/menu-1-1.png);
background-size: 109px 30px;
width: 110px;
background-repeat: no-repeat;
text-indent:-9999px;
}

.menu-1:active {
background-image: url(image/menu-1-3.png);
background-repeat: no-repeat;
background-size: 109px 30px;
text-indent:-9999px;
}

.menu-1:hover {
background-image: url(image/menu-1-2.png);
background-repeat: no-repeat;
background-size: 109px 30px;
text-indent:-9999px;
}

Все работает, кроме active! (

В style.css есть класс который отвечает за общий стиль и наверное конфликтует\перекрывает active:

.main-navigation ul li.current-menu-item a {
........
}

Ну и главный и вечный вопрос - что делать??

p.s. в css и php пока не силен, только учусь, поэтому и спрашиваю.
спасибо, надеюсь на помощь.

upd:
Есть почти решение:
.main-navigation ul .menu-1.current-menu-item a {

Но здесь есть минус - если у кнопки три состояния и она активна то при наведении видно оба состоянии - и активного и при наведении.

Answer 1

[bugbucket]

В CSS у ссылок есть 4 псевдокласса:

a:link - стиль ссылок по-умолчанию;
a:visited - стиль посещенных ссылок;
a:hover - стиль ссылки при наведении курсора;
a:active - стиль ссылки в нажатом состоянии, т. е. пока нажал и держишь =)

Чтобы выделить пункт меню текущей страницы нужно прописать стили для класса:

.main-navigation ul li.current-menu-item a

Comments

[Евгений Петров]

Вот прямо-таки 4? Именно 4 и всё?)) Вам бы спецификацию почитать.

[bugbucket]

@Petroveg: Оk, можно добавить :focus (не видел чтобы его к ссылкам применяли). А остальные к состоянию не относятся

[Евгений Петров]

:hover и :active относятся ко всем видимым элементам. Так что конкретно к ссылкам только 2 псевдокласса (в CSS Selectors 4 появляется еще any-link).
Ну а раз ссылочных псевдоклассов всего пока реально 2, то приплюсовывая те, что применяются и к другим элементам, я получу в итоге их десятка два.

Так откуда эта цифра 4?
Говорю же — читайте спецификацию, а потом проповедуйте.

[Евгений Петров]

А про :focus — печально, что вы ни разу не видели, потому что люди пользуются для навигации клавиатурой. Удивительно, правда?

[Vldmr]

bugbucket, насколько я понял если задать стиль для .main-navigation ul li.current-menu-item a то он опять будет общим или это нужно чтобы работало current-menu-item и затем можно будет отдельно указать стиль для
.menu-1.current-menu-item, menu-2.current-menu-item и тд ?

[Vldmr]

спасибо, получилось.

[Vldmr]

Возник еще один дополнительный вопрос:
В .menu-1 a:active и .menu-1 a:hover можно писать url(image/menu-1-3.png);
но в .main-navigation ul .menu-1.current-menu-item a { нужно писать полный путь к файлу... Почему так ?

[Vldmr]

И всетаки решение было не полным:
В таком решении, при использовании .main-navigation ul .menu-1.current-menu-item a и в случае если активен , например, пункт menu-2то menu-1 вообще не видно! Это мне ообще непонятно.Почему так если все селекторы заданы..?

[Vldmr]

Сам же и отвечу - не работает короткий путь к файлам, нужно писать полный путь. Это непроблема, но не удобно. Когда кнопка активна или когда первый раз на сайт заходиш - работает. Если понажимать кнопки - активную видно, а неактвиную нет.

Answer 2

[7rulnik]

Хм... Так вы же должны писать так:

.menu-1 a{
}
.menu-1 a:active {
}
.menu-1 a:hover {
}

Answer 3

[Alexander Sydorenko]

Для того чтобы в Wordpress появился active для активного меню надо поплясать немножко с бубном - как то так. а в общем случае вместо селектора active вам следует использовать селектор current-menu-item и помнить, что этот селектор добавляется стандартно к li элементу, а не li a. Если menu-1 это класс Вашего li элемента, то Ваше правило перепишется как то так

.menu-1.current-menu-item {
background-image: url(image/menu-1-3.png);
background-repeat: no-repeat;
background-size: 109px 30px;
text-indent:-9999px;
}

Если же речь именно об псевдоклассе :active то он применяется только к активным ссылкам, а .menu-1 у вас судя по всему li.. тогда должен помочь такой селектор:

.menu-1 a:active {
background-image: url(image/menu-1-3.png);
background-repeat: no-repeat;
background-size: 109px 30px;
text-indent:-9999px;
}

Comments

[Vldmr]

.menu-1.current-menu-item {
....
}

Это не работает :(

[Alexander Sydorenko]

@wiznv: Так мы так и не разобрались что надо? текущую страницу в меню подсветить? или таки ссылку у которой есть :active (это не одно и то же). Покажите сайт если можно, и скажите что надо сделать.

[Vldmr]

Alexander Sydorenko:
Нужно подсветить меню текущей страницы ( активный пункт меню). Уже разобрался :

.main-navigation ul .menu-1.current-menu-item a {
background-image: url(image/menu-1-3.png);
background-repeat: no-repeat;
background-size: 109px 30px;
text-indent:-9999px;
}

Спасибо ! ) Думаю еще не раз задам подобный вопрос.
p.s. приятное чувство когда разобрался и оно работает! ))

[Vldmr]

Alexander Sydorenko: и всетаки в этом решении есть минус - если кнопку меню нарисовать в трех состояниях (не активная, при наведении, активная), то в активном состоянии при наведении одновременно отображается состояние и активного пункта меню и " при наведении". Как будто это отдельное четвертое состояние кнопки..