CSS/Псевдо-элементы и Псевдо-классы
В CSS в качестве селекторов могут применяться псевдо-классы и псевдо-элементы.
Псевдо-классы
правитьПсевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (:link
, :visited
, :hover
, :active
, :focus
).
В CSS2 определены ещё 2 псевдо-класса:
:first-child
— первый дочерний элемент.
:lang(language)
— язык фрагмента документа.
Остальные псевдо-классы относятся к CSS3. Примеры некоторых из них:
:last-child
— последний дочерний элемент.
:first-of-type
— первый дочерний элемент заданного типа.
:last-of-type
— последний дочерний элемент заданного типа.
:nth-child(n)
— n-дочерний элемент.
:nth-last-child(n)
— n-дочерний элемент, отсчёт ведётся с конца.
:nth-of-type(n)
— n-дочерний элемент заданного типа.
:nth-last-of-type(n)
— n-дочерний элемент заданного типа, отсчёт ведётся с конца.
:not(selector)
— стилизация элементов, которые не содержат заданный селектор.
Псевдо-элементы
правитьПсевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа (:first-letter
, :first-line
), а также позволяют генерировать и стилизировать несуществующее содержимое (:before
, :after
и свойство content
). В CSS3 псевдо-элементы начинаются с двух двоеточий ::
(::first-letter
, ::first-line
, ::before
, ::after
).
В CSS3 также был (до 2008 года) псевдо-элемент ::selection
. Он стилизует выделенный пользователем текст. Браузеры Mozilla Firefox и SeaMonkey поддерживают нестандартный псевдо-элемент ::-moz-selection
.