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

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

Например, рассмотрим элемент EXAMPLE с атрибутом "notation", который по умолчанию принимает значение "decimal". Фрагмент 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]" имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (".").

Например, для всех элементов с class~="pastoral" информацию о стиле можно определить следующим образом:

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

или просто

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

Следующее правило назначает стиль только элементу H1 с class~="pastoral":

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

Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:

<H1>Не зеленый цвет</H1>

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

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

Например, следующее правило сопоставляется любому элементу P, атрибуту "class" которого в качестве значения назначен список разделенных пробелами значений, включающий слова "pastoral" и "marine":

P.pastoral.marine { color: green }

Это правило сопоставляется, если, например, class="pastoral blue aqua marine" и не сопоставляется, если class="pastoral blue".

Примечание. В языке CSS атрибут "class" наделен большими описательными возможностями, позволяющими разработчикам создавать свои собственные "языки написания документов" с использованием элементов, с которыми не связана никакая информация о представлении (например, элементы DIV и SPAN в HTML) и назначать информацию о стиле посредством атрибута "class". Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.

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

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

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

Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":

H1#chapter1 { text-align: center }

В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Т.е. это правило будет сопоставляться элементу P:

<HEAD>

<TITLE>Match P</TITLE>

<STYLE type="text/css">

*#z98y { letter-spacing: 0.3em }

</STYLE>

</HEAD>

<BODY>

<P id=z98y>Разреженный текст</P>

</BODY>

Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере данное правило не сопоставляется элементу P:

<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].

Примечание. В XML 1.0 [XML10] информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371] вместо #p371. Порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет "!important": [name=p371] {color: red ! important}. Естественно, что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.