CSS2 позволяет разработчикам создавать правила, сопоставляемые атрибутам, определенным в исходном документе.
Сопоставление атрибутам и значениям атрибутов
Селекторы атрибутов могут сопоставляться в следующих четырех случаях:
[att]
Если для элемента установлен атрибут “att”, независимо от значения этого атрибута.
[att=val]
Если значение атрибута “att” данного элемента в точности равно “val”.
[att~=val]
Если значением атрибута “att” данного элемента является список “слов”, разделенных пробелами, одно из которых в точности равно “val”. Если используется данный селектор, то слова, указанные в значении, не должны содержать пробелов (так как они уже используются для разделения слов).
[att|=val]
Если значением атрибута “att” элемента является список разделенных дефисом “слов”, начинающийся со слова “val”. Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут “lang” в HTML), как описано в стандарте RFC 1766 ([RFC1766]).
Значениями атрибутов должны быть идентификаторы или строки. Зависимость значений и имен атрибутов от регистра определяется языком документа.
Например, следующий селектор атрибута сопоставляется всем элементам H1, которые описывают атрибут “title”, независимо от его значения:
H1[title] { color: blue; }
В следующем примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута “class” в точности равно “example”:
SPAN[class=example] { color: blue; }
Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.
В этом примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута “hello” в точности равно “Cleveland”, а значение атрибута “goodbye” в точности равно “Columbus”:
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Следующие селекторы иллюстрируют различия между “=” и “~=”. Первый селектор будет сопоставляться, например, значению “copyright copyleft copyeditor” атрибута “rel”. Второй селектор будет сопоставляться только в том случае, если значение атрибута “href” равно “http://www.w3.org/”.
A[rel~="copyright"]
A[href="http://www.w3.org/"]
Следующее правило скрывает все элементы, атрибут “lang” которых имеет значение “fr” (т.е. документ на французском языке).
*[LANG=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута “lang”, которые начинается с “en”, включая “en”, “en-US” и “en-cockney”:
*[LANG|="en"] { color : red }
Аналогично, следующие правила звуковой таблицы стилей позволяют осуществлять звуковое воспроизведение сценария по ролям:
DIALOGUE[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
Значения атрибутов, используемые в DTD по умолчанию
Сопоставление осуществляется со значениями атрибутов в дереве документа. Если язык документа отличен от HTML, значения, принимаемые атрибутами по умолчанию, можно установить различными способами, в частности, с помощью DTD. Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о значениях, принимаемых по умолчанию, не включена в дерево документа.
Например, рассмотрим элемент EXAMPLE с атрибутом “notation”, который по умолчанию принимает значение “decimal”. Фрагмент DTD может выглядеть следующим образом:
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Если таблица стилей содержит правила
EXAMPLE[notation=decimal] { /*... установки по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... прочие установки...*/ }
то для отслеживания случаев, в которых для данного атрибута значение устанавливается по умолчанию, а не явно, необходимо добавить следующее правило:
EXAMPLE { /*... установки, используемые по умолчанию ...*/ }
Т.к. этот селектор является менее специфичным, чем селектор атрибутов, то он будет использоваться только в тех случаях, когда обрабатываются значения, принимаемые по умолчанию. Необходимо позаботиться о том, чтобы все другие значения атрибутов, которые не устанавливаются по умолчанию, были обработаны явно.
Селекторы классов
В таблицах стилей, используемых с 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”. Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.
