О спецификации CSS2 том 2

Совпадение атрибутов и их значений



5.8.1 Совпадение атрибутов и их значений

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

[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 }

Содержание раздела