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.