<< ПредыдущаяОглавлениеСледующая >>


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 и будет их игнорировать при отображении страницы.



<< ПредыдущаяОглавлениеСледующая >>