В CSS существует множество приемов для обработки ссылок. Мы можем визуальное представление ссылок в ответ на различные состояния с помощью довольно большой группы псевдоклассов:

1. :hover
2. :active
3. :visited
4. :focus
5. :focus-within
6. :focus-visible

:hover

псевдокласс :hover срабатывает, когда пользователь наводит курсор на элемент.

a:hover {
    color: red;
}

Если Вы используете для ссылки и другие состояния :link, :visited, :active, не забывайте, что стили для :hover должны следовать после стилей для :link и :visited в соответствии со схемой LVHA: :link - :visited - :hover - :active.

:active

псевдокласс :active соответствует нажатию на кнопку мыши.

a:active {
    color: blue;
}

Обычно он используется с элементами a и button.

:visited

Нетрудно догадаться, что псевдокласс :visited является визитной карточкой ссылок, которые пользователь уже посетил.

a:visited {
    color: yellow;
}

:focus

псевдокласс :focus нужен для элементов формы, получающих фокус ввода. Например, для полей ввода. Обычно :focus срабатывает при нажатии на кнопку мыши над соответствующим HTML-элементом или при его выборе с помщью кнопки Tab на клавиатуре.

input:focus {
    background-color: green;
}

Никогда не удаляйте свойство outline для псевдокласса :focus.

:focus-within

Псевдокласс :focus-within доступен для элементов, имеющих псевдокласс :focus или вложенный элемент, с псевдоклассом :focus

div:focus-within {
    background-color: cyan;
}

:focus-visible

Псевдокласс :focus-visible предназначен для разделения стилей элемента, получающего фокус ввода, в зависимости от того, какой метод взаимодействия с веб-сайтом выберет пользователь: мышь или клавиатуру.

/* focus received via mouse */
:focus:not(:focus-visible) {
    outline: none;
}

/* focus received via keyboard */
:focus-visible {
    outline: 1px solid blue;
}

Итак, следует понимать, что :focus и focus-visible не идентичны. Например: Вы хотите удалить outline для пользователей, взаимодействующих с интерфейсом с помощью мыши, но оставить его для тех, кто в силу различных обстоятельств предпочитает клавиатуру или симулирующее клавиатуру устройство. Именно в таких случаях :focus-visible будет чрезвычайно полезен.

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

Перевод статьи Suprabha “CSS Link Style”.