Псевдоклассы
:root: позволяет выбрать корневой элемент веб-страницы, наверное наименее полезный селектор, так как на правильной веб-странице корневым элементом практически всегда является элемент <html>
:link: применяется к ссылкам и представляет ссылку в обычном состоянии, по которой еще не совершен переход
:visited: применяется к ссылкам и представляет ссылку, по которой пользователь уже переходил
:active: применяется к ссылкам и представляет ссылку в тот момент, когда пользователь осуществляет по ней переход:hover: представляет элемент, на который пользователь навел указатель мыши. Применяется преимущественно к ссылкам, однако может также применяться и к другим элементам, например, к параграфам
:focus: представляет элемент, который получает фокус, то есть когда пользователь нажимает клавишу табуляции или нажимает кнопкой мыши на поле ввода (например, текстовое поле)
:not: позволяет исключить элементы из списка элементов, к которым применяется стиль
:lang: стилизует элементы на основании значения атрибута lang
:empty: выбирает элементы, которые не имеют вложенных элементов, то есть являются пустыми
a:visited {
color: red;
}
Псевдоклассы дочерних элементов:
:first-child: представляет элемент, который является первым дочерним элементом
:last-child: представляет элемент, который является последним дочерним элементом
:only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
:only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
:nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
:nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца
:nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер
:nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца
Псевдоклассы форм
:enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
:disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)
:checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
:default: выбирает элементы по умолчанию
:valid: выбирает элемент, если его значение проходит валидацию HTML5
:invalid: выбирает элемент, если его значение не проходит валидацию
:in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)
:out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне
:required: выбирает элемент, если у него установлен атрибут required
:optional: выбирает элемент, если у него не установлен атрибут required
Псевдоклассы элементов
::first-letter: позволяет выбрать первую букву из текста
::first-line: стилизует первую строку текста
::before: добавляет сообщение до определенного элемента
::after: добавляет сообщение после определенного элемента
::selection: выбирает выбранные пользователем элемент
Last updated