Селекторы

5 Селекторы

5.1 Сопоставление шаблонов

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

Чувствительность имен элементов языка документа к регистру определяется языком документа. Например, в HTML-документах имена элементов не зависят от регистра, а в XML-документах - зависят.

В следующей таблице приводятся краткие сведения о синтаксисе селекторов в CSS2:

5.2 Синтаксис селекторов

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

Селектор представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. Комбинаторами могут служить пробелы, символы ">" и "+". Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.

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

К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.

5.2.1 Группировка

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

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

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

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

5.3 Универсальный селектор

Универсальный селектор, при написании обозначаемый символом "*", сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу в дереве документа.

Если универсальный селектор является не единственным компонентом простого селектора, то символ "*" может быть опущен. Например, записи:

• *[LANG=fr] и [LANG=fr] эквивалентны.
• *.warning и .warning эквивалентны.
• *#myid и #myid эквивалентны.

5.4 Селекторы типов

Селектор типа сопоставляется названию типа элемента языка документа. Селектор типа сопоставляется каждому экземпляру данного типа в дереве документа.

H1 { font-family: sans-serif }

5.5 Селекторы потомков

Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу, который является потомком некоторого другого элемента в дереве документа (например, элементам EM, содержащимся в элементе H1). Селекторы потомков позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из двух и более селекторов, разделенных пробелом. Селектор потомков вида "A B" сопоставим, если элемент B является произвольным потомком некоторого своего предка A.

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

<H1>Данный заголовок <EM>очень</EM> важен</H1>

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

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

DIV * P 

DIV P *[href]

5.6 Селекторы дочерних элементов

Селектор дочерних элементов сопоставим, если элемент является дочерним по отношению к некоторому другому элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных символом ">".

BODY > P { line-height: 1.3 }

DIV OL>LI P

Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах first-child.

5.7 Селекторы сестринских элементов

Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 - область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2.

В определенных случаях сестринские элементы генерируют объекты форматирования, отображение которых осуществляется автоматически (например, уменьшение вертикальных полей между смежными блоками). Селектор "+" позволяет разработчикам определять дополнительные стили для сестринских элементов.

MATH + P { text-indent: 0 } 

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

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

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

CSS2 позволяет разработчикам создавать правила, сопоставляемые атрибутам, определенным в исходном документе.

5.8.1 Сопоставление атрибутам и значениям атрибутов

Селекторы атрибутов могут сопоставляться в следующих четырех случаях:

[att]

Если для элемента установлен атрибут "att", независимо от значения этого атрибута.

[att=val]

Если значение атрибута "att" данного элемента в точности равно "val".

[att~=val]

Если значением атрибута "att" данного элемента является список "слов", разделенных пробелами, одно из которых в точности равно "val". Если используется данный селектор, то слова, указанные в значении, не должны содержать пробелов (так как они уже используются для разделения слов).

[att|=val]

Если значением атрибута "att" элемента является список разделенных дефисом "слов", начинающийся со слова "val". Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут "lang" в HTML), как описано в стандарте RFC 1766 ([RFC1766]).

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

H1[title] { color: blue; }

SPAN[class=example] { color: blue; }

Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

A[rel~="copyright"]
A[href="http://www.w3.org/"]

*[LANG=fr] { display : none }

*[LANG|="en"] { color : red }

DIALOGUE[character=romeo] 
     { voice-family: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Значения атрибутов, используемые в DTD по умолчанию

Сопоставление осуществляется со значениями атрибутов в дереве документа. Если язык документа отличен от HTML, значения, принимаемые атрибутами по умолчанию, можно установить различными способами, в частности, с помощью DTD. Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о значениях, принимаемых по умолчанию, не включена в дерево документа.

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

EXAMPLE[notation=decimal] { /*... установки по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... прочие установки...*/ }

EXAMPLE { /*... установки, используемые по умолчанию ...*/ }

5.8.3 Селекторы классов

В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту "class" разработчики могут использовать точку (".") как альтернативу условному обозначению "~=". Таким образом, два выражения HTML "DIV.value" и "DIV[class~=value]" имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (".").

*.pastoral { color: green }  /* все элементы с class~=pastoral */

.pastoral { color: green }  /* все элементы с class~=pastoral */

H1.pastoral { color: green }  /* элемент H1 с class~=pastoral */

<H1>Не зеленый цвет</H1>
<H1 class="pastoral">Настоящий зеленый цвет</H1>

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

 
P.pastoral.marine { color: green }

5.9 ID-селекторы

Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются "id", а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.

Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение атрибута ID.

H1#chapter1 { text-align: center }

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

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

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ID=p123].

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

В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4.0 (см. [HTML40]) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.

В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево документа.

• Псевдоэлементы формируют абстрактные представления о дереве документа в дополнение к тем, которые определяются языком документа. Например, в языках, используемых для создания документов, не предусмотрены алгоритмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют разработчикам таблиц стилей обращаться к этим объектам, доступ к которым нельзя получить другим способом. Псевдоэлементы предоставляют разработчикам таблиц стилей различные способы назначения стиля содержимому, не существующему в исходном документе (например, псевдоэлементы :before и :after предоставляют доступ к генерируемому содержимому).
• Псевдоклассы позволяют осуществлять классификацию элементов по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в том смысле, что элемент может приобрести псевдокласс или лишиться его во время работы пользователя с этим документом. Исключение составляет псевдокласс ':first-child', который может быть выведен из дерева документа.

Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.

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

Имена псевдокласов и псевдоэлементов учитывают регистр.

Некоторые псевдоклассы являются взаимоисключающими, а другие можно применять одновременно к одному и тому же элементу. В случае конфликта правил результат определяется принятым порядком каскадирования.

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

5.11 Псевдоклассы

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

Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.

DIV > P:first-child { text-indent: 0 }

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

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

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

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

<P>abc <EM>default</EM> 

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

* > A:first-child   /* A  - первый дочерний элемент любого элемента */
A:first-child       /* Аналогично */

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

Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ':link' и ':visited' для различения этих типов ссылок:

• Псевдокласс :link применяется, если ссылка не была просмотрена.
• Псевдокласс :visited применяется, если ссылка была просмотрена пользователем.

Примечание. По истечении определенного времени агенты пользователей могут вернуть просмотренную ссылку в состояние ':link' (непросмотренная).

Эти два состояния являются взаимоисключающими.

Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 эквивалентны:

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

<A class="external" href="http://out.side/">external link</A>

A.external:visited { color: blue }

5.11.3 Динамические псевдоклассы :hover, :active и :focus

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

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

Эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам.

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

Пользовательские агенты не обязаны осуществлять повторное форматирование отображаемого документа из-за переходов, индуцируемых псевдоклассами. Например, в таблице стилей может быть указано, что 'font-size' у активной ссылки больше, чем у неактивной. Поскольку это может привести к изменению положения букв во время выбора пользователем данной ссылки, то агент пользователя может проигнорировать соответствующее правило стиля.

A:link    { color: red }    /* непросмотренные ссылки */
A:visited { color: blue }   /* просмотренные ссылки */
A:hover   { color: yellow } /* выбранный, но не активизированный */
                            /* пользователем элемент */ 
A:active  { color: white }   /* активные ссылки */

A:focus { background: yellow }
A:focus:hover { background: white }

Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.

5.11.4 Псевдокласс :lang

Если в языке документа предусмотрен способ определения разговорного языка элемента, то в CSS можно создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML [HTML40] язык определяется сочетанием атрибута "lang", элемента META и, возможно, информацией из протокола (такой как заголовки HTTP). С другой стороны, в XML-приложениях используется атрибут XML:LANG и, возможно, существуют другие методы, позволяющие в языке документа определять разговорный язык.

Псевдокласс ':lang(C)' сопоставляется элементу, использующему язык C. Здесь C - код языка в соответствии с определением HTML 4.0 [HTML40] и RFC 1766 [RFC1766]. Он сопоставляется аналогично оператору '|='.

HTML:lang(fr) { quotes: '" ' ' "' }
HTML:lang(de) { quotes: '"' '"' '\2039' '\203A' }
:lang(fr) > Q { quotes: '" ' ' "' }
:lang(de) > Q { quotes: '"' '"' '\2039' '\203A' }

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

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

Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:

P:first-line { text-transform: uppercase }

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

Обратите внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как

<P>Это довольно длинный абзац
HTML-документа, который будет разбит на несколько строк. 
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки 
будут обрабатываться как обычные строки абзаца.</P>

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

<P><P:first-line> Это довольно длинный абзац HTML-документа, 
</P:first-line> который будет разбит на несколько строк. 
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки 
будут обрабатываться как обычные строки абзаца. </P>

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

<P><SPAN class="test"> Это довольно длинный абзац HTML-документа,
который будет разбит на несколько строк.</SPAN> 
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки 
будут обрабатываться как обычные строки абзаца.</P>

<P><P:first-line><SPAN class="test"> Это 
довольно длинный абзац HTML-документа, 
</SPAN></P:first-line><SPAN class="test"> который будет разбит 
на несколько строк. </SPAN> 
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки 
будут обрабатываться как обычные строки абзаца. </P>

Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.

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

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

Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству 'float' присвоено значение 'none', в противном случае он аналогичен перемещаемому объекту.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Начальная буква</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Первые</SPAN> несколько слов из статьи
    в журнале "Экономист".</P>
 </BODY>
</HTML>

<P>
<SPAN>
<P:first-letter>
П
</P:first-letter>ервые
</SPAN> 
несколько слов из статьи в журнале "Экономист".
</P>

Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых строк. Кроме того, во время форматирования можно учитывать контур глифа.

Перед первой буквой должны быть включены имеющиеся знаки пунктуации (т.е. символы, определенные в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po) Unicode [UNICODE]), как это сделано в следующем примере:

Псевдоэлемент :first-letter сопоставляется только некоторым частям элементов уровня блока.

В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в голландском языке, если сочетание букв "ij" находится в начале слова, то они обе должны находиться в псевдоэлементе :first-letter.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Некоторый текст, разделенный на две строки</P>

<P>
<P:first-line>
<P:first-letter> 
Не 
</P:first-letter>который текст, 
</P:first-line> 
разделенный на две строки 
</P>

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

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

H1:before {content: counter(chapno, upper-roman) ". "}

Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлементами :before и :after, они применяются к первой букве или строке элемента, включая вставляемый текст.

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}