Что такое псевдоклассы в CSS?

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

Примеры псевдоклассов:

• Состояния пользователя:

  • :hover - элемент, на который наведен курсор мыши.
  • :active - элемент, который активируется (например, нажата кнопка мыши).
  • :focus - элемент, находящийся в фокусе ввода (например, текстовое поле).
  • :visited - ссылка, которую пользователь уже посещал.
  • :link - ссылка, которую пользователь еще не посещал.

• Положение в структуре:

  • :first-child - первый дочерний элемент своего родителя.
  • :last-child - последний дочерний элемент своего родителя.
  • :nth-child(n) - n-й дочерний элемент своего родителя.
  • :first-of-type - первый элемент своего типа среди дочерних.
  • :last-of-type - последний элемент своего типа среди дочерних.

• Другие:

  • :empty - элемент, который не содержит дочерних элементов или текста.
  • :not(selector) - элементы, которые не соответствуют указанному селектору.

Синтаксис:

selector:pseudo-class {
  property: value;
}

Пример использования:

/* Изменение цвета текста при наведении на абзац */
p:hover {
  color: blue;
}

/* Стиль для первого элемента списка */
li:first-child {
  font-weight: bold;
}

Псевдоклассы расширяют возможности селекторов, позволяя создавать более динамичные и интерактивные интерфейсы без использования JavaScript для простых стилевых изменений.