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

Автор: Александр Головко Дата публикации:

Предыдущая статья Селекторы псевдоклассов.

Описание селектора:

Выполняемая задача — настройка стилей для псевдоэлементов. В некоторых случаях — генерация псевдоэлементов.
Обозначение — название псевдоэлемента (с предшествующим двоеточием).
Пример использования:

будем выводить первую букву абзаца увеличенным размером шрифта.

p:first-letter {
	font-size: 120%;
}

Подробнее про селекторы псевдоэлементов

Псевдоэлементы — это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно.

Селектор псевдоэлементов и селектор псевдоклассов, точки зрения синтаксиса — это фактически одно и то же. Разница только в выбираемых элементах.

Псевдоэлементы, как и псевдоклассы, детально рассмотрены в нашем CSS справочнике (CSS по стандартам, подраздел «Псевдоэлементы»).

Так же как и с псевдоклассами, в этой статье рассмотрим CSS2 псевдоэлементы. А новым особенностям, которые привнес CSS3 будет посвящена отдельная статья.

Псевдоэлементы CSS2

В CSS2 определено 4 псевдоэлемента.

Псевдоэлемент :first-letter

Позволяет задавать стили для первой буквы внутри элемента.

Стили

p:first-letter {
	font-size: 120%;
}

работает точно так же, как если бы первая буква действительно была взята в отдельный тег:

<p>
<span class="firstLetter">Т</span>ут идет какой-то текст
<p>

.firstLetter {
	font-size: 120%;
}

Псевдоэлемент :first-line

Очень похож на предыдущий. Только стили применяются не к одной букве, а ко всей первой строке. Обрати внимание, что в случае резинового дизайна мы не можем знать заранее длину первой строки, и «взять» ее в span (как в случае с первой буквой) уже нереально.

Псевдоэлементы :after и :before

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

Пример. Реализуем FAQ в виде списка определений. При этом автоматически генерируем слова «вопрос» и «ответ»(в исходном HTML их не будет, а на страничке они отобразятся):

<dl>
<dt>Тут будет какой-то вопрос</dt>
<dd>А тут ответ</dd>
</dl>

dt::first-line{
	content: "Вопрос: ";
}
dd:before{
	content: "Ответ: ";
}

Замечание! Псевдоэлементы :after и :before не работают в IE6-7. Но тут нам поможет прием описанный в статье Эмуляция псевдоэлементов after и before для IE 6-7

Особенность использования

В CSS-селекторе псевдоэлемент должен обязательно идти последним. Например, такая запись не сработает, так как после псевдокласса идет еще и span:

p:first-line span{
	color: #80bd34;
}

Область применения

Селекторы псевдоэлементов :first-letter и :first-line достаточно экзотичны. Скорее всего, тебе не придется часто их использовать. Тем не менее, если будет необходимость, можно ознакомиться со статьей Используем псевдоэлемент :first-letter.

Что же касается генерации контента с помощью :after и :before, то это очень мощный прием, который применяется в различных, иногда, совсем не тривиальных ситуациях. Примеры можно посмотреть в статьях Резиновое меню, Вставка спецсимволов в генерируемый контент, Псевдоэлемент before для маркера списка.

Следующая статья — Составные селекторы. Комбинаторы.

Xiper