Спросят с вероятностью 10%
Псевдоклассы — это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое.
-
:hover — применяется к элементу, когда на него наводят курсор мыши.a:hover {
color: red; /* Ссылка станет красной при наведении /
}-
:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).input:focus {
border-color: blue; / Граница инпута станет синей при фокусе /
}-
:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).button:active {
transform: scale(0.98); / Кнопка немного уменьшится при клике /
}-
:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.li:nth-child(odd) {
background-color: gray; / Заливка каждого нечетного элемента списка /
}-
:not() — исключает из выборки элементы, соответствующие указанному селектору.div:not(.special) {
color: green; / Применяется к каждому div, который не имеет класса special */
}Зачем нужны псевдоклассы:
Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.
Псевдоклассы улучшают пользовательский опыт, делая интерфейс более отзывчивым и интуитивно понятным, а также облегчают поддержку и обновление стилей, минимизируя необходимость в добавлении и управлении классами и идентификаторами.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых