Универсальный 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 }

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

This headline is very important

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

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

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

This headline is very important

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

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 }

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, значения по умолчанию для атрибутов могут определяться в ОТД или где-либо ещё. Таблицы стилей должны создаваться так, чтобы они работали даже тогда, когда значения по умолчанию не включены в дерево документа.