Глава 2.2. Селекторы, псевдоклассы и псевдоэлементы

2.2.1. Базовые селекторы

Как было сказано выше, каждое правило CSS состоит из селектора и набора деклараций. Декларации определяют свойства отображения, а селектор указывает, к каким именно элементам документа именно эти декларации должны применяться (такие элементы называются субъектами этого селектора). Начнем с формального определения селекторов.

Базовый селектор
Универсальный селектор или селектор типа.
Универсальный селектор
Символ звездочка (*), означающий, что его субъектами являются все элементы документа. Если звездочка является не единственной составляющей селектора, то она может опускаться.
Селектор типа
Совпадает с именем элемента в документе и указывает, что его субъектами являются все элементы документа с данным именем.
Простой селектор
Базовый селектор, за которым следуют нуль или более селекторов атрибутов, селекторов идентификаторов или псевдоклассов (в любом порядке).
Составной селектор
Образуется из простых селекторов соединением их с помощью специальных символов.

Как мы видим, основу этих определений составляют базовые селекторы. Поясним их определения примерами:

* { font-family: sans-serif }	/* Применяется ко всем элементам документа */
H1 { font-family: sans-serif }	/* Применяется ко всем элементам H1 */

Если несколько селекторов имеют одинаковые декларации, то их можно сгруппировать, т. е. объединить в одно правило, перечислив селекторы через запятую. Например, следующий набор правил

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

эквивалентен одному правилу

H1, H2, H3 { font-family: sans-serif }
Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Не поддерживает универсальные селекторы (4.0+)

2.2.2. Селекторы классов

Для HTML-документов CSS поддерживает селекторы классов, которые основаны на использовании атрибута class и имеют вид element.class. Пусть, например, наша таблица стилей содержит правило

P.warning { font-style: italic }

Тогда следующий элемент HTML-документа

<P class="warning">Рекомендуется выбирать названия классов,
  отражающие их назначение.</P>

будет отображаться курсивным шрифтом:

Рекомендуется выбирать названия классов, отражающие их назначение.

Селектор класса может не содержать названия элемента, например

.warning { font-style: italic }

Такое правило относится ко всем элементам, имеющим атрибут class="warning".

Примечание. Селектор класса, не содержащий имени элемента, следует понимать как селектор *.class, в котором универсальный селектор * опущен.

CSS позволяет задавать и подмножества значения атрибута class, например правило

P.warning.red { font-style: italic }

будет применимо к элементам с атрибутом class="warning red blue", но не применимо к элементам с атрибутом class="warning blue".

Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Не поддерживает множественные классы (4.0+)

2.2.3. Селекторы идентификаторов

Документы могут содержать элементы с атрибутами ID, задающими уникальные идентификаторы этих элементов. Для HTML-документов это атрибут id, в приложениях XML название соответствующего атрибута определяется приложением. Соответствующий селектор идентификатора в CSS имеет вид element#id или просто #id.

Примечание. Селектор идентификатора, не содержащий имени элемента, следует понимать как селектор *#id, в котором универсальный селектор * опущен.

В примере

<HEAD>
  <STYLE type="text/css">
    #p001 { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id="p001">Разреженный текст</P>
</BODY>

правило стиля будет применено к элементу P с атрибутом id="p001". С другой стороны, в следующем примере

<HEAD>
  <STYLE type="text/css">
    H1#p001 { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id="p001">Широкий текст</P>
</BODY>

правило стиля применимо только к элементу H1 с атрибутом id="p001" и поэтому не будет применено к элементу P с этим атрибутом.

Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Полное соответствие стандарту (4.0+)

2.2.4. Селекторы атрибутов

Теперь рассмотрим простые селекторы, которые являются уточнением базовых селекторов. Выше мы уже познакомились с двумя типами простых селекторов, которые применяются для задания стилей HTML-документов: селекторы классов и селекторы идентификаторов. Здесь мы познакомимся еще с одной группой селекторов, а именно с селекторами атрибутов. Эти селекторы обладают мощным и гибким синтаксисом и предназначены для работы с любыми документами, которые поддерживаются языком CSS. К сожалению, они пока не поддерживаются Веб-обозревателями. Существуют четыре вида селекторов атрибутов:

[attr]
Применяется ко всем элементам, имеющим атрибут attr, независимо от его значения.
[attr=value]
Применяется ко всем элементам, чей атрибут attr имеет значение value.
[attr~=value]
Применяется ко всем элементам, чей атрибут attr имеет состоит из списка значений, разделенных пробелами, и одно из этих значений равно value.
[attr|=value]
Применяется ко всем элементам, чей атрибут attr имеет значение, состоящее из нескольких "слов", разделенных дефисом, причем первое из этих слов равно value (первоначально предназначалось для выделения кода основного языка из полного кода языка).

Значения атрибутов должны быть идентификаторами или текстовыми строками. Зависят ли они от регистра, определяется языком документа. Приведем примеры.

H1[title] { color: blue }		/* Применяется ко всем элементам H1, */
					/* имеющим атрибут title */
SPAN[class="example"] { color: blue }	/* Применяется ко всем элементам SPAN, */
					/* имеющим атрибут class="example" */
SPAN[class~="example"] { color: blue }	/* Эквивалентно селектору SPAN.example */
*[lang="fr"] { display: none }		/* Применяется ко всем элементам, */
					/* имеющим атрибут lang="fr" */
*[lang|="en"] { color: red }		/* Применяется ко всем элементам, у которых */
					/* атрибут lang начинается с "en" (например, */
					/* "en-us" или "us-gb") */
Поддержка: Internet Explorer Не поддерживаются
           Netscape Navigator Не поддерживаются

2.2.5. Селекторы потомков

Перейдем теперь к рассмотрению составных селекторов, которые образуются из простых селекторов путем их соединения в новый селектор. Важнейшими из составных селекторов являются селекторы потомков, т. е. селекторы тех элементов, которые являются потомками другого элемента в дереве документа. Рассмотрим такую задачу: определить стиль отображения всех элементов EM, которые находятся внутри элементов H1. Для этого мы могли бы написать следующий набор правил:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

Здесь первые два правила определяют стили отображения для всех элементов H1 и EM соответственно, а третье правило как раз и решает нашу задачу. Таким образом, для задания селектора потомка достаточно образовать селектор из селектора, задающего предка, и селектора, задающего потомка, разделив их пробелом. Рассмотрим еще один пример:

DIV * EM { color: blue }

Данное правило будет применяться ко всем элементам EM, которые находятся внутри любых элементов (универсальный селектор), которые заключены в элемент DIV.

Поддержка: Internet Explorer Полное соответствие стандарту (5.0+)
           Netscape Navigator Не поддерживает универсальные селекторы (4.0+)

2.2.6. Селекторы детей

CSS поддерживает использование селекторов детей, т. е. селекторов тех элементов, которые являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких селекторов символом ">". Следующее правило будет применяться ко всем элементам P, которые являются детьми элемента BODY (иными словами, оно применимо к тем и только тем элементам P, которые находятся внутри элемента BODY, и никакого промежуточного элемента между BODY и P нет):

BODY > P { text-indent: 3em }

В следующем примере сочетаются селекторы потомков и селекторы детей:

DIV OL>LI P { line-height: 1.5 }

Субъектом этого правила будет элемент P, который является потомком элемента LI, который является ребенком элемента OL, который является потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг символа ">" в этом примере опущены.

Поддержка: Internet Explorer Не поддерживаются
           Netscape Navigator Не поддерживаются

2.2.7. Селекторы соседей

CSS поддерживает использование селекторов соседей, т. е. селекторов тех элементов, которые являются братьями в дереве документа и расположены в документе непосредственно друг за другом. Селекторы соседей образуются путем соединения нескольких селекторов символом "+". Следующее правило уменьшает расстояние между элементами H1 и H2, если H2 непосредственно следует в документе за H1:

H1 + H2 { margin-top: -5mm }

Приведем аналогичный пример, но в нем элемент H1 должен относиться иметь атрибут class="opener":

H1.opener + H2 { margin-top: -5mm }
Поддержка: Internet Explorer Не поддерживаются
           Netscape Navigator Не поддерживаются

2.2.8. Псевдоэлементы и псевдоклассы

Все рассмотренные до сих пор селекторы основывались на положении элемента в дереве документа. Однако, для некоторых целей отображения данных одного дерева недостаточно. С этой целью в CSS были включены понятия псевдоэлементов и псевдоклассов, обеспечивающие возможности отображения документа, не описываемые в терминах дерева документа. Разница между этими понятиями состоит в том, что псевдоклассы могут употребляться в любом месте селектора, а псевдоэлементы только после субъекта селектора.

2.2.9. Псевдоклассы

2.2.9.1. Псевдокласс :first-child

Псевдокласс :first-child соответствует элементу, который является первым ребенком данного элемента. В следующем примере субъектами селектора будут те элементы P, которые являются первым ребенком элемента DIV:

DIV > P:first-child { text-indent: 3em }

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

<P>Последний абзац перед примечанием.</P>
<DIV class="note">
<P>Первый абзац внутри примечания.</P>
</DIV>

а такой же элемент P в этом фрагменте отображается без отступа, т. к. не является первым ребенком DIV:

<P>Последний абзац перед примечанием.</P>
<DIV class="note">
<H2>Примечание.</H2>
<P>Первый абзац внутри примечания.</P>
</DIV>

Следующее правило указывает, что элемент EM, содержащийся в элементе P, который является первым ребенком, должен отображаться полужирным шрифтом:

P:first-child EM { font-weight: bold }

Следующие два селектора эквивалентны между собой:

* > A:first-child   /* A является первым ребенком любого элемента */
A:first-child       /* То же самое */
Поддержка: Internet Explorer Не поддерживается
           Netscape Navigator Не поддерживается

2.2.9.2. Псевдоклассы :link и :visited

Обозреватели часто по-разному отображают уже посещенные и еще не посещенные гиперссылки. CSS обеспечивает возможность задания стилей их отображения через псевдоклассы :link (не посещенная гиперссылка) и :visited (посещенная гиперссылка). Какой именно элемент задает анкеры гиперссылок, определяется языком документа. В языке HTML анкеры задаются элементом A, поэтому следующие декларации эквивалентны:

A:link { color: red }
:link { color: red }

Если следующая гиперссылка

<A class="external" href="http://www.out.com/">Внешняя ссылка</A>

будет посещена пользователем, то правило

A.external:visited { color: blue }

вызовет ее отображением голубым цветом.

Поддержка: Internet Explorer Соответствие стандарту (5.0+)
           Netscape Navigator Не поддерживает :visited (4.0+)

2.2.9.3. Псевдоклассы :hover, :active и :focus

Стиль отображения некоторых элементов может динамически изменяться в результате определенных действий пользователя. Для этого CSS содержит три следующих псевдокласса:

  • Псевдокласс :hover применяется к соответствующему элементу, когда пользователь навел курсор мыши на этот элемент, но не активировал его щелчком мыши.
  • Псевдокласс :active применяется к соответствующему элементу, когда пользователь активировал его щелчком мыши.
  • Псевдокласс :focus применяется к соответствующему элементу, когда он получает фокус (в результате нажатия определенных клавиш).

Эти псевдоклассы не являются взаимно исключающими; возможны ситуации, когда к элементу будут одновременно применены правила отображения, заданные несколькими из них.

CSS не определяет, к каким именно элементам могут применяться указанные псевдоклассы. Однако, современные обозреватели поддерживают их только применительно к элементам A, например:

A:link    { color: red }    /* непосещенные ссылки */
A:visited { color: blue }   /* посещенные ссылки */
A:hover   { color: yellow } /* ссылки под курсором мыши*/
A:active  { color: lime }   /* активные ссылки */
Поддержка: Internet Explorer Поддерживает :hover и :active только применительно к элементу A (5.0+)
           Netscape Navigator Не поддерживаются (4.0+)

2.2.9.4. Псевдокласс :lang

Псевдокласс :lang(код языка) указывает на язык элемента. В языке HTML язык элемента задается атрибутом lang или соответствующим метаописателем; в языке XML — атрибутом XML:LANG. Например, следующие правила задают кавычки для элементов, написанных на английском и русском языках соответственно:

HTML:lang(en) { quotes: '« ' ' »' }
HTML:lang(ru) { quotes: '»' '«' '\2039' '\203A' }
Поддержка: Internet Explorer Не поддерживается
           Netscape Navigator Не поддерживается

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

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

Псевдоэлемент :first-line применим к любому блочному элементу и задает стиль отображения его первой строки. Например, следующий фрагмент HTML-документа

<STYLE>
P:first-line { text-transform: uppercase }
</STYLE>

<P>Это длинный абзац, который будет разбит
обозревателем на несколько строк.
При этом первая строка абзаца будет отображаться
прописными буквами, как это задано в
таблице стилей.</P>

будет отображаться так:

ЭТО ДЛИННЫЙ АБЗАЦ, КОТОРЫЙ БУДЕТ РАЗБИТ ОБОЗРЕВАТЕЛЕМ НА НЕСКОЛЬКО СТРОК. ПРИ ЭТОМ
первая строка абзаца будет отображаться прописными буквами, как это задано в таблице стилей.

К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.

Поддержка: Internet Explorer Соответствие стандарту (5.5+)
           Netscape Navigator Не поддерживается (4.0+)

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

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

<STYLE>
P:first-letter { font-size: 200%; font-weight: bold }
</STYLE>

<P>Это абзац, первая буква которого
будет выделена обозревателем.</P>

будет отображаться так:

Это абзац, первая буква которого будет выделена обозревателем.

К данному псевдоэлементу применимы только следующие свойства: свойства шрифтов, свойства цвета, свойства фона, свойства границ, свойства заполнителей, свойства рамок, text-decoration, vertical-align (только если float равно none), text-transform, line-height, float, text-shadow и clear.

Поддержка: Internet Explorer Соответствие стандарту (5.5+)
           Netscape Navigator Не поддерживается (4.0+)

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

Псевдоэлементы :before и :after используются для вставки автоматически генерируемого содержимого соответственно перед или после указанного элемента. Подробно они описаны в п. 2.11.2.

Поддержка: Internet Explorer Не поддерживаются
           Netscape Navigator Не поддерживаются