Как выделить кнопку?

Question

[alias337]

Суть такая делаю кнопки для переключения между страницами.Надо чтоб кнопка выделялась когда я нахожусь на странице чтобы обозначить на какой именно странице я нахожусь.
есть такой код в html.

<nav class="dws-menu">
            <ul>
              <li><a href="menu.html"><i class="fa fa-"></i><<</a></li>
              <li><a href="menu.html"><i class="fa fa-"></i>1</a></li>
              <li><a href="menu2.html"><i class="fa fa-"></i>2</a></li>
              <li><a href="menu3.html"><i class="fa fa-"></i>3</a></li>
              <li><a href="menu4.html"><i class="fa fa-"></i>4</a></li>
              <li><a href="menu2.html"><i class="fa fa-"></i>>></a></li>
            </ul>
            </nav>

и такой в css.

.dws-menu *{
	margin: 0;
	padding: 0;
}
.dws-menu ul,
.dws-menu ol{
	list-style: none;
}
.dws-menu > ul{
    display: flex;
    justify-content: center;
}
.dws-menu > ul li a{
	display: block;
	margin: 2px;
	background:rgba(92,92,94,.6);
	padding: 5px 25px 5px 25px;
	font-size: 14px;
	color:#454547;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
	border: 1px solid black;
	color: black;
	transition: all 0.3s ease;
	border-radius: 2px;
}
.dws-menu >ul li a:hover{
	background: rgba(54,54,54);
}

Заранее Спасибо за внимание.

Comments

[Ankhena]

Либо бэкэнд либо js выясняет текущий урл, сравнивает его с урлом в ссылке и при совпадении дописывает ссылке (или ее родителю, как укажете) класс.
Этот класс раскрашивается в CSS.

Примеров реализации в гугле миллионы.

[alias337]

:) прости но js я не знаю а background > .dws-menu , будет перекрывать этот background
Прости если я ошибаюсь поправь меня.
Спасибо за внимание.

[snap44]

alias337, если вы только верстаете, то просто создаете класс .current-page например и стилизуете как нужно. Дальше дело за бэк-енд программистом.

Answer 1

[Ankhena]

https://jsfiddle.net/cvhtzm1e/ Это вариант с добавлением класса.

Умнее убирать href у ссылки, которая не должна быть ссылкой. И использовать селекторы атрибутов и :not. https://habr.com/post/85920/

вот так: https://jsfiddle.net/h4yqwLmt/