Глава 16. Псевдоэлементы
Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.
Перечень всех псевдоэлеметов:
Так же как и в случае с псевдоклассами, псевдоэлементы используются согласно следующего синтаксиса: p:first-letter{color:#ff0}
где:
В данном случае мы указали, что 1-я буква всех параграфов будет красного цвета.
Стиль 1-й буквы
Псевдоэлемент first-letter задаёт стиль 1-й буквы в каком либо текстовом блоке (позволяет сделать буквицу).
<title>Псевдоэлемент first-letter</title>
<style>
p{font:16px Arial} p:first-letter{font:bold 24px Verdana;color:#ff0} </style>
<p>Мало кто знает, как много надо знать для того, чтобы знать, как мало мы знаем.<p>
<p>Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом.<p>
В примере выше изменен размер, шрифт, цвет и жирность 1-й буквы для всех параграфов на странице.
Стиль 1-й строки
Псевдоэлемент first-line определяет стиль 1-й строки в текстовом блоке.
Пример:
<title>Псевдоэлемент first-line</title>
<style>
body{background:#fcd}
p{color:#005}
p:first-line{font:16px Arial;color:#f00} </style>
<p>Если бы при приеме на работу…
<p>Однажды молодой сисадмин…
Контент
Псевдоэлементы after и before предназначены для врезки в страницу сайта контента, который изначально неуказан в HTML-документе. Вставляется содержание перед (:before) или после (:after) какого-либо элемента с помощью свойства content, которое и определяет содержимое для вставки.
Пишется так: p:after{content:"Конец, а кто слушал молодец!"}
Теперь после каждого параграфа будет добавляться надпись:"Конец, а кто слушал молодец!"
Значением свойства content может быть:
Пример:
<title>Псевдоэлементы after и before</title>
<style>
*:before{color:#00f;font-variant:small-caps}
*:after{color:#f00;font-variant:small-caps}
body:before{content:"начало документа"}
body:after{content:"конец документа"}
p:before{content:"анекдот:"}
p:after{content:":-)";font-size:x-large}
ul{list-style-type:none}
li:before{content:"№ ";color:#0f0}
h4:before{content:url(graphics/marker.gif)}
q:before{content:open-quote;font-size:30px}
q:after{content:close-quote;font-size:30px}
img:after{content:attr(src)}
</style>
<h4>Заголовок с сердечком</h4>
<h4>Параграфы с добавлением слова "анекдот:" вначале и смайлика в конце:</h4>
<p>Если бы при приеме на работу.
<p>Однажды молодой сисадмин.
<h4>После рисунка добавляется значение его атрибута:"src" - путь к рисунку:</h4>
<img src=graphics/fon.jpg>
<h4>Цитата в кавычках:</h4>
<q>Лёд тронулся, господа присяжные заседатели!</q>
<h4>Список с нестандартными маркерами:</h4>
<li>1-й
<li>2-й
<li>3-й
</ul>
Комментарии:
Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. В примере текст в начале везде синий, а в конце красный, если он конечно не указывается дополнительно, как в случае с зелёными "маркерами" в списке из примера.
В качестве добавляемого контента может вступать какой-либо объект, в примере добавлен рисунок ко всем заголовкам, однако, если браузер не сможет обработать тот или иной файл, то ничего не добавится.
Спецсимволы HTML (например, спецсимвол ¶), будут отображаться простым текстом (¶, а не ¶), так что, если необходимо добавить какую-либо хитрую закорючку, используйте юникод.
Псевдоэлементы after и before, как и свойство content не поддерживаются браузерами IE7 и ниже.
Псевдоэлемент ::selection
Псевдоэлемент ::selection (пишется именно с 2 2-точиями) указывает на стиль выделенного пользователем текста.
Данный псевдоэлемент появился на свет только в спецификации CSS3 и поддерживается не всеми браузерами (IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент ::-moz-selection, который официально не входит в спецификацию CSS).
Пример:
<title>Псевдоэлемент ::selection</title>
<style>
p::selection{color:#f00;background:#0f0} </style>
<p>Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент ::selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.
К данному псевдоэлементу можно применить только следующие CSS свойства: color, background.
