Псевдоклассы и псевдоэлементы

В этой лекции будут расссмотрены продвинутые возможности CSS: псевдоклассы и пседоэлементы. Псевдоклассы позволяют контролировать офрмление элементов в зависимости от их состояния, а псевдоэлементы – добавлять дополнительные элементы на страницу, не изменяя при этом структуру HTML-файла.

Перед прочтением

Перед прочтением нужно обязательно ознакомиться с лекцией о формах и элементах ввода, так как некоторое количество примеров в этой лекции будет основано на материалах оттуда.

Содержание

§1. Псевдоклассы

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

Разберем на примере подсветки строки таблицы при наведении курсора:

tr {
  background: #fff;
}

tr:hover {
  background: #0e73ee;
}

https://codepen.io/lovesolaristics/pen/GREzayX

Благодаря псевдоклассам мы можем контролировать динамические параметры селекторов. Эти свойства сработают когда селектор подходит под дополнительный признак.

Обычно CSS код, содержащий пседокласс выглядит так:

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

Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus {} применится к любому элементу, который будет выделен с помощью навигации по клавише Tab с клавиатуры.

Рассмотрим каждый из пседоклассов подробнее.

:active

Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас. Можно кнопке задать стиль, который будет виден в тот краткий миг, когда над кнопкой зажата клавиша мыши.

active.gif