Что такое CSS-псевдоклассы и как их использовать

CSS-псевдоклассы являются специальными ключевыми словами, которые позволяют применять стили к определенным состояниям, характеристикам или положению элементов на веб-странице. Они позволяют создавать динамичные стили без использования JavaScript и управлять структурой или состоянием элементов, такими как ховер, фокус, активность и многими другими.

Синтаксис псевдоклассов

CSS-псевдоклассы добавляются к селекторам при помощи двоеточия (:) и ключевого слова псевдокласса:

селектор:псевдокласс {
  свойство: значение;
}

Примеры использования псевдоклассов

:hover

Псевдокласс :hover применяет стили к элементу, когда курсор мыши находится над ним. Это полезно для создания интерактивности и отображения всплывающих подсказок.

button:hover {
  background-color: blue;
  color: white;
}

:focus

Псевдокласс :focus применяется к элементам, которые находятся в фокусе (обычно при навигации с помощью клавиатуры). Обычно используется для форм и ссылок.

input:focus {
  border-color: green;
}

:active

Псевдокласс :active применяется к элементам, когда они находятся в активном состоянии (например, при нажатии на кнопку или ссылку).

a:active {
  color: red;
}

:nth-child

Псевдокласс :nth-child позволяет применять стили к элементам, основываясь на их порядковом номере в родительском элементе. Очень полезно для создания адаптивных сеток, зебра-стилей в таблицах и других структурных вариантов.

li:nth-child(odd) {
  background-color: lightgray;
}

Заключение

CSS-псевдоклассы предоставляют мощные возможности для стилизации элементов на веб-странице. Они позволяют улучшить взаимодействие с пользователем, управлять структурой и состоянием элементов. Не забывайте экспериментировать и изучать другие доступные псевдоклассы! 😉