В CSS существует множество способов изменения внешнего вида ссылок в зависимости от их состояния. Это достигается с помощью различных псевдоклассов, таких как :hover, :active, :visited, :focus, :focus-within, и :focus-visible.
Псевдоклассы для ссылок
Псевдокласс :hover срабатывает,
a:hover {
color: red;
}
При использовании :hover вместе с другими состояниями (:link, :visited, :active), важно соблюдать порядок: LVHA (Link, Visited, Hover, Active).
Псевдокласс :active применяется, когда элемент находится в состоянии нажатия.
a:active {
color: blue;
}
Часто используется с элементами <a> и <button>.
Псевдокласс :visited обозначает ссылки, которые пользователь уже посещал.
a:visited {
color: yellow;
}
Псевдокласс :focus применяется к элементам, которые получают фокус ввода, например, к полям формы.
input:focus {
background-color: green;
}
Важно не удалять свойство outline для элементов с :focus, чтобы сохранить доступность.
Псевдокласс :focus-within применяется к элементам, которые содержат в себе элемент с :focus.
div:focus-within {
background-color: cyan;
}
Псевдокласс :focus-visible используется для разделения стилей элементов в зависимости от метода взаимодействия пользователя (мышь или клавиатура).
/* focus received via mouse */
:focus:not(:focus-visible) {
outline: none;
}
/* focus received via keyboard */
:focus-visible {
outline: 1px solid blue;
}
Это позволяет управлять видимостью контура только для тех, кто использует клавиатуру, сохраняя его отключенным для пользователей мыши.
Заключение
Использование псевдоклассов в CSS позволяет гибко управлять внешним видом ссылок и элементов формы в зависимости от различных состояний. Соблюдение правильного порядка применения стилей и сохранение доступности — ключевые аспекты при работе с этими инструментами.
