Псевдоклассы
Взаимодействия
Псевдоклассы в ЦСС — это особые ключевые слова, их дописывают к указателю на элемент через двоеточие, чтобы описать свойства этого элемента в разных условиях. Например, когда пользователь наведёт на элемент курсор мыши:
Псевдоклассы
Взаимодействия
button:hover {
background-color: red;
}
Псевдоклассов много, они делятся на несколько категорий. Сегодня расскажу о первой и пожалуй самой используемой категории — о псевдоклассах взаимодействия. Псевдоклассы этой категории описывают состояния, вызванные действиями пользователя на странице.
:hover — наведение курсора мыши. По понятным причинам, толком не работает на сенсорных устройствах:
button:hover {
background-color: red;
transform: rotate(-3deg);
}
:active — клик по элементу:
button:active {
transform: scale(1.5);
}
Браузеры уже стилизуют фокус по умолчанию, обычно это синяя обводка
:focus — фокус — это элемент, с которым сейчас взаимодействует пользователь. Например, фокус получают поля ввода, когда пользователь ставит в них курсор:
Браузеры уже стилизуют фокус по умолчанию, обычно это синяя обводка
input:focus {
border-bottom: 3px solid blue;
}
Фокус пропадёт, если кликнуть вне интерактивного элемента.
Если нужно, чтобы элемент нельзя было выделить клавишей Tab, ему задают свойство tabindex со значением ‑1. Этим же свойством можно и наоборот — добавить возможность фокуса любому элементу, не обязательно интерактивному
Ещё фокус помогает работать со страницей с клавиатуры. Клавиша Tab будет последовательно устанавливать фокус на всех интерактивных элементах: ссылках, кнопках, полях и переключалках. Так можно быстро заполнять формы, переключаясь табом между полями. Кнопки в фокусе можно нажимать пробелом, а по ссылкам в фокусе переходить энтером.
Если нужно, чтобы элемент нельзя было выделить клавишей Tab, ему задают свойство tabindex со значением ‑1. Этим же свойством можно и наоборот — добавить возможность фокуса любому элементу, не обязательно интерактивному
input:focus {
border-bottom: 1px solid black;
}
button:focus {
box-shadow: 0 6px 25px rgba(4, 80, 254, .5);
}
:focus‑within — стилизует элемент, внутри которого находится фокус. Например, можно подсветить всю форму при заполнении полей внутри:
form:focus-within {
background: rgb(4, 80, 254, .7);
}
:focus‑visible — более «умный» фокус. Он позволяет показывать стили фокуса только тогда, когда это реально необходимо. Например, многие считают избыточным фокус при кликах мыши по кнопкам, но если полностью убирать фокус, то переключаться между элементами с клавиатуры придётся вслепую. Здесь и пригодится :focus-visible — чтобы включить стили фокуса для клавиатуры и отключить для мыши.
Кнопка в примере отбросит тень только при фокусе с клавиатуры через таб, клик мышкой не применит стили фокуса, в отличие от предыдущих примеров:
button:focus-visible {
box-shadow: 0 6px 25px rgba(4, 80, 254, .5);
}
:focus‑visible. CSS‑Tricks.
На самом деле, :focus-visible несколько хитрее, чем просто «фокус только для клавитауры», он определяет необходимость показа стилей фокуса по разным параметрам элемента и настройкам операционной системы и браузера. Почитать в подробностях можно на CSS‑Tricks.
:focus‑visible. CSS‑Tricks.
В следующих советах расскажу о других категориях псевдоклассов. А пока советую изучить ЦСС‑свойство transition, чтобы делать переходы между состояниями не мгновенными, а плавными.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.