Селектор сравнения образцов
Любое правило 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{...}
Простые селекторы можно связать цепочкой в одно селекторное выражение, но каждый простой селектор в нем отделяется символами пустого пространства, знаком > или +.