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

1. Псевдоклассы
2. Псевдоэлементы

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

Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса / псевдоэлемента.

Вы, наверное, обращали внимание на то, что на некоторых сайтах при наведении курсора на ссылку она, например, меняет цвет. Это возможно благодаря псевдоклассам и псевдоэлементам. Рассмотрим пример.

/* селектор двоеточие псевдокласс */
a:hover {
  color: #000; /* текст ссылки при наведении становится чёрным */
}

Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a (<a>) цвет текста ссылки (color) будет чёрным.

Псевдоклассы

Псевдоклассы - это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.

Вернёмся к самому простому примеру - ссылке. Выше мы рассмотрели код, в случае которого ссылка меняла цвет при наведении. Как Вы можете догадаться, можно добавить и другие стили - изменение фона, размера шрифта, расположение элемента, возможность добавить или убрать нижнее подчёркивание и многое другое.

Список самых используемых псевдоклассов, которые обязательно пригодятся в работе:

hover - при наведении курсора на элемент
focus - при клике на элемент, например поле для ввода данных
active - при активации элемента пользователем, то есть в момент клика
link - стиль для не посещённых ссылок
visited - стилевое оформление к посещенным ссылкам
target - переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root - определение корневого элемента документа
indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked - стиль для radio и checkbox в выбранном положении: input:checked
firstchild - стиль для первого дочернего элемента селектора
lastchild - изменения в последнем элементе родителя
onlychild - для дочерних элементов, единственных у родителя
lang (en) - определение языка элемента, где en выбранный язык

Код CSS Примеры

a:hover {
  color: #000; /* текст ссылки при наведении становится чёрным */
}

a:active {
  top: -1px; /* элемент при клике опускается чуть ниже, эффект нажатия */
}

Псевдоэлементы

Псевдоэлементы - это элементы, которые позволяют генерировать содержимое, не указанное в HTML документе. Например, с помощью псевдоклассов можно какой-либо текст до или после элемента, или назначить стили для выделенного текста.

Список основных используемых псевдоэлементов, которые пригодятся в работе:

after - добавление контента ПОСЛЕ указанного элемента
before - добавление контента ДО указанного элемента
firstletter - стили для первой буквы в контенте элемента
firstline - стилевое оформление первой строки текста в элементе
selection - применение стилей при выделении текста в элементе

Одной из самых распространённых задач является добавление фразы до или после элемента. Рассмотрим на примере цитат. Допустим для определённого эелемента нужно добавить текст перед ним.

.quote:before {
  content: "Цитата "; /* Перед классом .quote будет добавлено слово Цитата и пробел */
}

Также при помощи уже after можно добавить слова после указанного класса. Например, слово Далее или Авторскую подпись.

Обязательно проверьте работу псевдоклассов и псевдоэлементов! Это увлекательно)
Спасибо за внимание!