Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

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

Псевдоэлементы CSS — это специальные инструкции, позволяющие применить стили (CSS) не к целым HTML-элементам, а только к определенным участкам внутри них. То есть эти участки совсем не обязательно должны быть ограничены с обеих сторон HTML-тегами. Другими словами, браузер, основываясь на указаниях в CSS, создает «виртуальный» элемент видимый только ему и применяет к этому элементу заданные стили.

Указание псевдоэлементов происходит следующим образом: сначала записывается какой-нибудь простой селектор (класс, идентификатор, селектор атрибутов и т.д.), а затем через двоеточие (:) сам псевдоэлемент. Общий синтаксис:

селектор:псевдоэлемент { свойство: значение; свойство: значение; ... }

В CSS 3 между селекторами и псевдоэлементами записывается уже не одно, а два двоеточия (::). Это сделано для того, чтобы появилось визуальное отличие псевдоклассов от псевдоэлементов. Но, к сожалению, такую запись поддерживается не всеми браузерами, особенно это качается старых версий. Общий синтаксис:

селектор::псевдоэлемент { свойство: значение; свойство: значение; ... }

Так как псевдоэлементы, как и псевдоклассы, имеют отношение к селекторам, а не свойствам CSS, то, к сожалению, их тоже нельзя использовать во встроенных стилях создаваемых с помощью атрибута style.

Пример использования псевдоэлементов CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Псевдоэлементы CSS</title>
  <style type="text/css">
   p:first-letter {
    font: bold 200% serif; /* стили шрифта первого символа параграфа */
    color: red;  /* цвет первого символа */
    background: #ffcc66;  /* фон */
    padding: 0.1em 0.2em; /* внутренние отступы */
   }
  </style>
 </head>
 <body>
  <p>В этом примере с помощью псевдоэлемента были изменены стили первой буквы параграфа.</p>
 </body>
</html>

Результат в браузере

В этом примере с помощью псевдоэлемента были изменены стили первой буквы параграфа.

Обратите внимание, что эффекта описанного в примере можно было добиться, просто заключив первую букву параграфа в <SPAN> и применив стили к нему. Но ведь с псевдоэлементом :first-letter все гораздо удобней и проще получается, согласитесь, особенно если надо выделить первую букву у всех параграфов на странице.

Домашнее задание.

  1. Возьмите макет страницы одного из предыдущих уроков по CSS. Можете в нем что-нибудь изменить с учетом ваших теперешних знаний.
  2. Пусть в начало каждого заголовка <H2> автоматически добавляется слово «Раздел». И выделите его как-нибудь, причем пусть текст заголовка будет подчеркнут, а это слово — нет.
  3. Ну и, до кучи, выделите как-нибудь первую букву параграфов.
Соседние селекторы← Содержание →Наследование
Учебник CSS