Спецификация 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 }



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