Языки информационного обмена

Селектор сравнения образцов


Любое правило CSS начинается с селектора. Селектор представляет собой выражение, определяющее сравнение с образцом, который связывает конкретный элемент XML с конкретным правилом. Когда обработчик CSS находит элемент соответствующий селектору, правило запускается. Запуск правила означает просто создание объекта визуализации, который приобретает свойства, заданные телом правила. В таблице ниже показан набор типов селектора, поддерживаемых стандартом CSS2:

ОбразецЗначение
*Соответствует любому элементу
ЕСоответствует любому элементу Е (любому элементу типа Е)
Е, FСоответствует любому элементу Е или элементу F
Е FСоответствует любому элементу F, являющемуся потомком элемента Е
Е > FСоответствует любому элементу F, являющемуся непосредственным потомком элемента Е
Е: first-childСоответствует элементу Е, если Е является первым непосредственным потомком своего родителя
E: linkСоответствует элементу Е, если Е представляет собой исходный якорь гиперссылки, которая еще не посещалась (: link) или уже посещалась (:visited)
Е: visited
E: activeСоответствует элементу Е при определенных действиях пользователя
E: hover
E: focus
Е:lang( с)Соответствует элементу типа Е, если Е написан на языке с (человеческом). Каким образом определяется язык, показывает язык документа
Е + FСоответствует любому элементу F, которому непосредственно предшествует элемент Е
E [foo]Соответствует любому элементу Е с заданным атрибутом foo (независимо от его значения)
E [foo = "warning"]Соответствует любому элементу Е, атрибут foo которого точно равен выражению "warning"
Е [foo ~= "warning"]Соответствует любому элементу Е, атрибут foo которого представляет собой список значений, разделенных пробелами, одно из которых точно равно выражению "warning"
E [lang | = "еn"]Соответствует любому элементу Е, атрибут "lang" которого содержит разделенный дефисами список значений, начинающихся слева с сочетания "еn"
E#myidСоответствует любому элементу Е, атрибут ID которого равен myid


Селектор представляет собой последовательность одного или нескольких простых селекторов.

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

Селекторы атрибутов позволяют осуществлять более точный выбор или сравнение образцов, вплоть до атрибутов или даже значений атрибутов.

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

Обычно правила CSS связываются с элементом на основе его положения в дереве документа. Однако селекторы псевдоклассов позволяют обращаться к узлам других типов в дереве документа. Например, псевдокласс first-child позволяет найти и связать правило с первым элементом, порожденным заданным элементом:

TITLE: first-child {...}

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

Еще одним типом интересного селектора являются псевдоэлементы. Например, может оказаться необходимым переформатировать первую строку параграфа по-другому или первую букву главы написать более крупным шрифтом. В следующем примере выбирается первая строка из содержания данных элемента <DESCRIPTION>, а затем к ней применяется коллекция свойств из этого правила:

DESCRIPTION: first-line{...}

А в следующем коде со свойствами правила ассоциируется первая буква этого содержания:

DESCRIPTION: first-letter{...}

Простые селекторы можно связать цепочкой в одно селекторное выражение, но каждый простой селектор в нем отделяется символами пустого пространства, знаком > или +.


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