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

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

5.8.1. Согласование атрибутов и значений атрибутов.

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

[att]

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

[att=val]

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

[att~=val]

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

[att|=val]

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

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

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

H1[title] { color: blue; }

В следующем примере, селектор согласуется со всеми элементами SPAN, чьи атрибуты "class" имеют точное значение "example":

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

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

Ниже, селектор согласуется со всеми элементами, чьи атрибуты "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-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 }

5.8.2. Значение атрибутов по умолчанию в DTD.

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

Например, рассмотрим элемент EXAMPLE с атрибутом "notation", который имеет значение "decimal". Фрагмент файла DTD может быть следующим:

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

Если стилевая таблица содержит правила

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }

то для того, чтобы найти случаи, где этот атрибут установлен по умолчанию (не детально), необходимо добавить следующее правило:

EXAMPLE { /*... default property settings ...*/ }

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

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

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

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

*.pastoral { color: green }  /* all elements with class~=pastoral */

или только:

.pastoral { color: green }  /* all elements with class~=pastoral */

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

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Следуя этому правилу, первый пример Н1, приведенный ниже, не будет иметь зеленый текст, но в то же время второй пример будет:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

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

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

P.pastoral.marine { color: green }

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

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