Спецификация CSS2 - [19]

H1#chapter1 { text-align: center }

В следующем пример правило таблицы стилей устанавливает совпадение с элементом, чьё значение ID - "z98y".

Правило, таким образом, совпадает для элемента P:

  Match P
Wide text

В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y".

Правило в этом примере не совпадает с элементом P:

  Match H1 only
Wide text

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML селектор#p123 более специфичен, чем [ID=p123], в терминах каскада.

Примечание. В XML 1.0 [XML10] информация о том, какой атрибут содержит ID-ы элемента, находится в ОТД. При разборе XML, ПА не всегда читают ОТД и поэтому могут не знать, какой ID у элемента. Если дизайнер таблицы стилей знает или предполагает, что это именно данный случай, он должен использовать нормальные селекторы атрибутов: [name=p371] вместо #p371. Однако каскадный порядок нормальных селекторов атрибутов отличается от ID-селекторов. Может понадобиться добавить приоритет "!important" в объявления: [name=p371] {color: red ! important}. Конечно, элементы в документах XML 1.без ОТД не имеют ID-ов вообще.

В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно, простой селектор CSS не может с ним соотноситься.

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

[x]. Псевдоэлементы создают абстракции дерева документа наряду с абстракциями, специфицированными языком документа. Например, языки документа не имеют механизмов для доступа к первой букве или первой строке содержимого элемента . Псевдоэлементы CSS позволяют дизайнерам таблиц стилей получить доступ к информации, иначе не доступной. Псевдоэлементы могут также предоставить способ назначить стиль содержимому, которое не существует в документе-источнике (например, псевдоэлементы :before и :after дают доступ к генерируемому содержимому).

[x]. Псевдоклассы классифицируют элементы не по их именам, атрибутам или содержимому, а по другим характеристикам ; по характеристикам, которые в принципе не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в предположении, что элемент может получить или потерять псевдокласс, пока пользователь взаимодействует с документом. Исключением является ':first-child', который может быть вычислен из дерева документа.

Ни псевдоэлементы , ни псевдоклассы не появляются в документе-источнике или в дереве документа.

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

Имена псевдоэлементов и псевдоклассов нечувствительны к регистру.

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

ПА, соответствующие HTML могут игнорировать все правила с селекторами:first-line или :first-letter или, альтернативно, могут поддерживать только поднаборы свойств этих псевдоэлементов.

Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.

Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:

DIV > P:first-child { text-indent: 0 }

Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте:

 Последний P перед note.

Первый P внутри note.

но не совпадёт со вторым P в следующем фрагменте:

 Последний P перед note.

Note

Первый P внутри note.

Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:

P:first-child EM { font-weight : bold }

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

Например, EM в:

abc default

является первым дочерним элементом от P.

Следующие два раздела эквивалентны:

* > A:first-child   /* первый дочерний элемент любого элемента */
A:first-child       /* То же самое */

ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS псевдоклассы ':link' и ':visited' для этих случаев:

[x]. Псевдокласс :link применяется к ссылкам, которые ещё не посещены.