Как стилизовать элемент, когда он был сфокусирован с помощью клавиши табуляции?

Question

Я хочу применить стиль к тегу <a>, когда он был сфокусирован с помощью клавиши табуляции. Проблема в том, что :focus также срабатывает, когда я активирую <a> щелчком мыши.

Как я могу это сделать?

Answer 1

Вы можете использовать следующее решение:

a, a:link, a:active {
  color:green;
}
a:focus:not(:active) {
  color:yellow;
}

<a href="#">Test #1</a>
<a href="#">Test #2</a>
<a href="#">Test #3</a>
<a href="#">Test #4</a>