Поиск

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

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". Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.