4.9. Селекторы псевдоэлементов

Псевдоэлементы, в отличие от псевдоклассов, позволяют назначать стили отдельным элементам HTML-страницы. В CSS2.1 определены четыре псевдоэлемента:

:first-letter – первая буква элемента;
:first-line – первая строка в элементе;
:before – стиль перед элементом;
:after – стиль после элемента.

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

<html> <head> <title>Пример</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> h1:first-letter {color: red;} p:first-line {background: gray;} </style> </head> <body> <h1>Заголовок страницы</h1> <p>Каскадные таблицы стилей позволяют задавать псевдоклассы и псевдоэлементы для более гибкого назначения стилей при отображении HTML-страницы в окне браузера. </body> </html>

Рис. 4.10. Пример использования псевдоэлементов first-letter и first-line

Следует отметить, что псведоэлементы first-letter и first-line применяются только к тегам уровня блоков, таких как <p>, <div>, <h1> - <h6> и др., но не могут быть применены к строчным элементам, например, таких как ссылки <a>. Кроме того, при определении в таблице стилей все псевдоэлементы должны размещаться в конце селектора, т.е. запись вида p:first-letter b неверна, т.к. за псевдоэлементом следует тег <b>.

Вторая пара псевдоэлементов before и after позволяет добавлять содержимое до и после элемента, например,

h2:before {content: '['; color: gray;} h2:after {content: ']'; color: gray;}

будет заключать все заголовки уровня h2 в квадратные скобки:

<h2>Заголовок страницы</h2>

Рис. 4.11. Пример использования псевдоэлементов before и after

Последние два псевдоэлемента воспринимаются только современными браузерами. Например, браузер IE6 не работает с псевдоэлементами before и after и будет их игнорировать при отображении страницы.