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

Псевдокласс (англ. pseudo-class) – класс, который существует не зависимо от того, объявлен атрибут class для элемента или нет. Такие классы существуют всегда и предусмотрены для некоторых элементов и их состояний. Самые часто используемые псевдоклассы это псевдоклассы элемента a. Для него существует четыре псевдокласса, в соответствии с состоянием этого элемента на текущий момент времени: hover, link, visited и active.

Псевдокласс hover позволяет определить стиль для гиперссылок, находящихся под курсором мыши в текущий момент времени; link – это еще не посещенные гиперссылки, visited – уже посещенные гиперссылки; active – активные или открываемые в данный момент ссылки. Чаще всех используется псевдокласс hover.

Синтаксически, псевдокласс указывается в селекторе после знака двоеточия.

Псевдокласс

a:hover {text-decoration: underline;}

Такая запись добавит эффект подчеркивания ссылки при наведении на нее мышкой. Разумеется это имеет смысл только когда эффект подчеркивания для ссылок отменен по умолчанию.

Псевдокласс может быть использован в комбинации с обычным классом. При этом порядок записи названий классов особой роли не играет, но принято псевдоклассы писать в самом конце простого селектора.

Комбинация класса и псевдокласса

a.nav-link:hover {color: #000;}

Многие современные браузеры имеют псевдокласс hover, предопределенный для всех HTML-элементов, в то время как, например браузер Internet Explorer 6.0 понимает псевдокласс hover только для элементов a. Использование псевдокласса hover позволяет делать некоторые интересные эффекты, вроде многоуровневого меню на основе CSS без использования JavaScript.

Кроме упомянутых здесь псевдоклассов, существуют также и другие, но поскольку они поддерживаются не всеми браузерами, на данном этапе мы их рассматривать не будем.

Псевдоэлемент (англ. pseudo-element) – это элемент или мнимый элемент, характеризующийся определенным критерием, и к которому могут быть отдельно применены CSS-свойства. Псевдоэлементы редко используются по причине плохой их поддержки различными браузерами, поэтому на данном этапе рассматриваться не будут.