5.2 Синтаксис селекторов

Простой селектор - это либо селектор типа, либо универсальный селектор, непосредственно за которым в произвольном порядке может следовать несколько селекторов атрибутов, ID-селекторов или псевдоклассов. Простой селектор сопоставим, если сопоставимы все его компоненты.

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

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

К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.

5.2.1 Группировка

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

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

H1 { font-family: sans-serif }

H2 { font-family: sans-serif }

H3 { font-family: sans-serif }

эквивалентна следующей:

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

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

5.3 Универсальный селектор

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

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

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

• *.warning и .warning эквивалентны.

• *#myid и #myid эквивалентны.

5.4 Селекторы типов

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

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

H1 { font-family: sans-serif }

5.5 Селекторы потомков

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

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

H1 { color: red }

EM { color: red }

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

<H1>Данный заголовок <EM>очень</EM> важен</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. Обратите внимание на пробелы с обеих сторон звездочки "*".

Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут "href" и, во-вторых, находится внутри элемента P, который, в свою очередь, находится внутри элемента DIV:

DIV P *[href]