Почему не работает active у ссылки?

Question

[Артём Цымбалюк]

<a class="showlink" data-show="popular"><li class="popular">Популряные</li></a>
						<a class="showlink" data-show="youtube"><li class="youtube">YouTube</li></a>
						<a class="showlink" data-show="vk"><li class="vk">Вконтакте</li></a>
						<a class="showlink" data-show="instagram"><li class="inst">Instagram</li></a>
						<a class="showlink" data-show="twitter"><li class="twitter">Twitter</li></a>
						<br>
						<a class="showlink" data-show="facebook"><li class="facebook">Facebook</li></a>
						<a class="showlink" data-show="ok"><li class="ok">Одноклассники</li></a>
						<a class="showlink" data-show="google"><li class="google">Google+</li></a>
						<a class="showlink" data-show="periscope"><li class="periscope">Periscope</li></a>
						<a class="showlink" data-show="other"><li class="other">Другие</li></a>

li:hover, li:focus, li:active
		background-color: #2670c7;
		border-radius: 4px 5px 5px 4px;
		color: white
		cursor: pointer
.popular
	background-image: url("../img/ico/popular.svg")
	background-repeat: no-repeat
	background-position: 7px 5px;
.popular:hover, .popular:active, .popular:focus
	background-image: url("../img/ico/popular-h.svg")

Здравствуйте, почему при нажатии на ссылку не работает актив?
Актив должен окрашивать li в синий цвет , а иконку менять на другую

Comments

[Lynn «Кофеман»]

У li не может быть active, и вообще заворачивать li в ссылку невалидно

[Артём Цымбалюк]

Алексей Тен: а как тогда реализовать ссылки? в li > a ?

Answer 1

[HamSter]

Правильно так

1. Верстка списка начинается с тега ul внутри которого размещаются li, а уже внутри них ссылки могут быть!
Это по стандартам так!!!
2. У ссылок, чтобы они были именно ссылками и работали обязательно должен быть атрибут href="http://link..."
3. :active, :focus задается, соответственно, ссылкам a, а не li

4. Код предоставляйте в codepen, либо компилируйте ваш sass (кстати тоже написанный с грубыми ошибками)!!
5. .... аж глаза заболели от вашего вопроса!

Answer 2

[Сергей ZSA]

Ужс какой-то. Не верстайте так. Сделайте по-человечески чтоб в ulбыли li а не a в ul. И для ссылок применяйте active ну и естественно фигурные скобки ставить за вас никто не будет а также ; в конце свойств.

Comments

[Артём Цымбалюк]

Сергей ZSA фигурных нету, потому что это SASS. \

[Сергей ZSA]

Артём Цымбалюк: Их никто не мешает вам ставить, а поддерживать ваш код будет потом в 10 раз удобней даже вам. ; там тоже нет потому что это sass ? Честно, я бы чокнулся такой код поддерживать.

[Артём Цымбалюк]

Сергей ZSA: Сергей, простите, что побеспокоил Вас.

[HamSter]

Сергей ZSA: а потом пишут, что верстальщики это "ненужные убожища" = )

[HamSter]

Артём Цымбалюк: Вы хоть сами поняли что написали? li внутри a + br + перед тем как выкладывать или в codepen ссылку давайте или хотя бы компилируйте sass!!!