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

Псевдоэлементы (pseudo-elements) и псевдоклассы (pseudo-classes) в ограниченном количестве появились ещё в CSS Level 1. В CSS Level 2 они были переработаны, и их стало больше.

Netscape Navigator версии 4 понимает только :link, :visited и :active псевдоклассы в отношении гиперссылок. Internet Explorer 4+, Netscape Navigator 5+ и Opera 4+ поддерживают также :hover.

Браузеры Internet Explorer 5+, Netscape Navigator 5+ и Opera 4+ также распознают следующие полезные псевдоэлементы: :first-line (первая строка текста) и :first-letter (первая буква текста).

Псевдоэлемент :first-letter отлично подходит для создания эффекта буквицы. К этому параграфу, например, был применен стиль p.ex:first-letter {color:red; font-size:120%; font-weight:bold}. Ну а если вы хотите, к примеру, чтобы первая строка каждого параграфа на странице состояла из заглавных букв, то определите следующий стиль: p:first-line {text-transform:uppercase}.

Надо учесть, однако, что браузеры по-разному интерпретируют :first-line и :first-letter, когда в стиле используются такие CSS свойства как vertical-align и clear.

В CSS Level 2 существуют также псевдоэлементы :before (содержимое до элемента) и :after (содержимое после элемента). Об одном из вариантов их использования в Netscape Navigator 6 и Opera 4+ написано в этой заметке.