Описание тега pseudo-class

Псевдокласс (буквально "ложный класс") CSS позволяет более точно выбирать элементы в документе на основе статуса элемента, местоположения в древовидной структуре DOM, действий пользователя или других факторов. Затем стили можно применить только к тем элементам, которые соответствуют требованиям псевдокласса, аналогично тому, как используется класс CSS для нацеливания на элемент. Их не следует путать с псевдоэлементами.

Список псевдоклассов CSS

Это список всех псевдоклассов, которые в настоящее время включены в спецификации CSS (а не черновики редакторов или будущие спецификации).

• :link а также :visited
  Выбирает ссылки, которые либо не посещены, либо посещены соответственно, чтобы применить к ним дополнительные стили. Посещенные ссылки часто отображаются другим цветом, чтобы указать конечному пользователю, что он уже посещал эту страницу ранее.

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

• :hover
  Выбирает элемент, над которым в данный момент наведен курсор, чтобы к нему можно было применить дополнительные стили. Многие элементы, выполняющие определенные действия при нажатии, имеют "эффект наведения", чтобы показать конечному пользователю, что они что-то делают. Его также можно использовать для раскрытия дополнительной информации пользователю и для многих других целей.

• :focus
  Выбирает элемент, который в данный момент находится в фокусе. Например: курсор пользователя в настоящее время находится внутри элемента ввода (пока они могут печатать и т. Д.).

• :enabled а также :disabled
  Выбирает элемент пользовательского интерфейса, который либо включен, либо отключен, чтобы к ним можно было применить дополнительные стили.

• :checked
  Выбирает переключатель или флажок, который в настоящее время находится в состоянии "отмечен", чтобы к нему можно было применить дополнительные стили. Имейте в виду, что многие браузеры не позволяют применять стили непосредственно к переключателю или флажку. В основном это используется для выбора дополнительных элементов сразу после полей, когда они находятся в отмеченном состоянии.

• :empty
  Выбирает элемент, в котором нет дочерних элементов или текста (следовательно, он пуст). Имейте в виду, что это не применимо к замененным элементам, которые не имеют фактического содержимого (например, изображения и входные данные).

• :root
  Выбирает корень документа.

• :target
  Выбирает элемент, который является целью ссылающегося URI. Это происходит, когда элемент имеет идентификатор, соответствующий части комментария URL-адреса (#some-place-in-the-document).

• :nth-child(), :nth-of-type(), :nth-last-child(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, а также :only-of-type
  Все это структурные псевдоклассы, которые выбирают элементы на основе их расположения в родительском элементе. Они полезны для создания полосатых полосок, стилизации определенных элементов, которые всегда появляются первыми или последними, и для многих других целей.

• :lang()
  Выбирает элемент, использующий указанный язык.

Замененные элементы

Любой элемент, внешний вид и / или размеры которого определяются каким-либо внешним ресурсом, считается заменяемым элементом. Некоторые псевдоклассы нельзя применять к заменяемым элементам, потому что они не имеют "содержимого" или заменяются чем-то (например, элементами управления пользовательского интерфейса). Заменяемые элементы включают изображения (<img>), встроенные фреймы (<iframe>), разрывы строк (<br>), горизонтальные линейки (<hr>), плагины (<object>), элементы формы (<button>, <textarea>, <input>, а также <select>), видео (<video>), звуковые сигналы (<audio>) и холсты (<canvas>). Любой другой элемент считается незамещенным.