Псевдоклассы CSS — это специальные ключевые слова, которые позволяют применять стили к определённым характеристикам или состояниям. С их помощью можно создавать динамические стили без применения JavaScript, а также управлять состоянием элементов, например, активность, фокус, ховер и т.д.⠀
Сегодня поделимся псевдоклассами, которые пригодятся любому фронтендеру ⬇️
▪️ hover — один из самых часто используемых псевдоклассов, срабатывает, когда пользователь наводит курсор на определенный элемент: ссылку или кнопку;
▪️ active — срабатывает во время нажатия на элемент, когда пользователь уже кликнул на него, но еще не отпустил кнопку мыши;
▪️ target — управляет стилем элемента, на который ведет якорная ссылка;
▪️ link — стилизует ссылки, которые пользователь еще не посещал и позволяет настроить общий вид отображения таких ссылок на странице;
▪️ focus — обычно используется для форм и ссылок, применяется к элементам, которые находятся в фокусе ( при навигации с помощью клавиатуры);
▪️ visited — срабатывает на тех ссылках, которые пользователь уже посещал;
▪️ nth-child — незаменим для создания адаптивных сеток и разных структурных вариантов, применяет стили к элементам, основываясь на их порядковом номере в родительском элементе. Очень полезно для создания;
▪️ disabled — используется для выбора и изменения элементов форм;
▪️ enabled — отбирает не заблокированные для выбора и изменения элементы форм;⠀
Конечно, это далеко не весь список псевдоклассов CSS и хорошо, если ты научишься разбираться в них. У псевдоклассов есть мощные возможности для стилизации элементов на веб-странице и они значительно улучшают взаимодействие с пользователем, а значит повышают посещаемость сайта.
#methed_про_ит