Спецификация CSS2 - Евгений Резниченко

Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,

H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }

эквивалентно:

H1, H2, H3 { font-family: sans-serif }

CSS предлагает также другие механизмы "сокращений", включая множественные объявления и сокращённые свойства.

Универсальный cелектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.

Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:

[x]. *[LANG=fr] и [LANG=fr] эквивалентны.

[x]. *.warning и .warning эквивалентны.

[x]. *#myid и #myid эквивалентны.

Cелектор типа совпадает с именем типа элемента языка документа. Cелектор типа совпадает с каждым вхождением типа элемента в дереве документа.

Следующее правило совпадает со всеми элементами H1 в дереве документа:

H1 { font-family: sans-serif }

Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержатся в элементе H1"). Cелекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.

Рассмотрим следующие правила:

H1 { color: red } EM { color: red }

Хотя смысл этих правил в том, чтобы выделять текст путём изменения его цвета, в следующем случае эффект не будет достигнут:

<H1>This headline is <EM>very</EM> important</H1>

В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:

H1 { color: red } EM { color: red } H1 EM { color: blue }

Третье правило совпадёт с элементом EM в следующем фрагменте:

<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

Следующий селектор:

DIV * P

совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV.

Обратите внимание на пробелы с каждой стороны от "*".

Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут "href" и (2) находящимся внутри P, который сам находится внутри DIV:

DIV P *[href]

Селектор дочерних элементов совпадает , если элемент является дочерним относительно другого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделённых символом ">".

Это правило устанавливает стиль всех элементов P, являющихся дочерними относительно BODY:

BODY > P { line-height: 1.3 }

Здесь сочетаются селекторы потомков и селекторы дочерних элементов:

DIV OL>LI P

Здесь селектор совпадает с элементом P, являющимся потомком LI; элемент LI обязан быть дочерним относительно элемента OL; элемент OL обязан быть потомком DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.

Информацию о выборе первого дочернего элемента данного элемента см. ниже в разделе о псевдоклассе :first-child.

Смежные селекторы-родственники имеют следующий синтаксис: E1 + E2, где E2 является субъектом селектора. Селектор совпадает, если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.

В определённых контекстах смежные элементы генерируют форматированные объекты, чьё представление обрабатывается автоматически (например, сжатие вертикальных полей между смежными боксами). Селектор "+" позволяет авторам специфицировать дополнительный стиль для смежных элементов.

Так, следующее правило указывает, что если элемент P следует непосредственно за элементом MATH, то он не должен учитываться:

MATH + P { text-indent: 0 }

Следующий пример уменьшает вертикальное пространство, разделяющее H1 и H2:

H1 + H2 { margin-top: -5mm }

Следующее правило аналогично одному из вышеприведённых примеров, за исключением того, что оно добавляет селектор атрибута. Таким образом, специальное форматирование возникает только тогда, когда H1 имеет class="opener": H1.opener + H2 { margin-top: -5mm }

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 }

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

Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".

Фрагмент ОТД может быть таким:

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

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

EXAMPLE[notation=decimal] { /*... установки по умолчанию для свойства ...*/ } EXAMPLE[notation=octal] { /*... другие установки ...*/ }

тогда, чтобы отобрать случаи, когда атрибут установлен по умолчанию, а не явно, можно добавить следующее правило:

EXAMPLE { /*... значения по умолчанию для свойства ...*/ }

Поскольку этот селектор менее специфичен, чем селектор атрибута, он будет использоваться только для случаев установки значения по умолчанию.

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

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