5.6 Селекторы дочерних элементов

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

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

BODY > P { line-height: 1.3 }

В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:

DIV OL>LI P

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

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

5.7 Селекторы сестринских элементов

Селекторы сестринских элементов имеют следующий синтаксис: 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 }

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

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

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 }