Евгений Резниченко - Спецификация CSS2

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

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

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

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

Последний 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 применяется к ссылкам, которые ещё не посещены.

[x]. Псевдокласс :visited применяется после того, как пользователь посетил ссылку.

Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.

Эти два состояния взаимоисключающи.

Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:

A:link { color: red } :link { color: red }

Если следующая ссылка:

external link

будет посещена, то данное правило:

A.external:visited { color: blue }

сделает её голубой.

Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:

[x]. Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").

[x]. Псевдокласс :active применяется, если элемент активирован пользователем. Например, между нажатием и отпусканием пользователем клавиши мыши.

[x]. Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.

CSS не определяет, какие элементы могут быть в вышеуказанных состояниях и как осуществляется вход и выход из этих состояний. Сценарий может меняться в зависимости от того, реагирует элемент на действия пользователя или нет, и различные устройства и ПА могут иметь разные способы указания на элементы (их активации).

От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов псевдоклассов. Например, таблица стилей может специфицировать, что 'font-size' гиперссылки :active должен быть больше, чем у неактивной гиперссылки, но поскольку это может вызвать изменение положения букв при выборе пользователем гиперссылки, ПА может проигнорировать соответствующее правило стиля.

A:link { color: red } /* непосещённые ссылки */ A:visited { color: blue } /* посещённые ссылки */ A:hover { color: yellow } /* пользователь провёл над */ A:active { color: lime } /* активные ссылки */

Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.

Пример комбинации динамических псевдоклассов:

A:focus { background: yellow } A:focus:hover { background: white }

Последний селектор совпадает с элементами A, которые входят в псевдоклассы :focus и :hover.

О представлении контуров фокуса см. раздел динамические контуры фокуса.

Примечание. В CSS1 псевдокласс ':active' взаимно исключался с ':link' и ':visited' . Сейчас это уже не так. Элемент может быть и ':visited'' , и ':active' (или ':link' и ':active'), и нормальные правила каскадирования определяют применение свойств.

Если язык документа специфицирует, как определяется человеческий язык , то становится возможным записывать селекторы CSS, которые совпадают с элементом, на базе его языка. Например, в HTML [HTML40]язык определяется комбинацией атрибута "lang" , элемента META и, возможно, информацией из протокола (такой как в "шапках" HTTP). XML использует атрибут, называемый XML:LANG, и могут быть также и другие методы определения языка, зависящие от языковой специфики.

Псевдокласс :lang (C)' совпадает , если документ написан на языке C. Здесь C - это код языка, как специфицировано в HTML 4.0 [HTML40]и RFC 1766 [RFC1766]. Он совпадает тем же способом, что и для оператора '|=' .

Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:

HTML:lang(fr) { quotes: '« ' ' »' } HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' } :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

Вторая пара правил в действительности устанавливает свойство 'quotes' элементов Q в соответствии с языком его предка.

Так делается, потому что выбор знаков кавычек обычно базируется на языке элемента, окружающего кавычки, а не самих кавычек, и кусок французского текста "a l'improviste" в середине английского текста использует английские знаки кавычек.

Псевдоэлемент :first-line применяет специальный стиль к первой форматированной строке параграфа. К примеру:

P:first-line { text-transform: uppercase }

Это правило говорит: "Перевести буквы первой строки каждого параграфа в верхний регистр". Однако селектор "P:first-line" не совпадёт ни с каким реальным элементом HTML. Он совпадёт с псевдоэлементом, который соответствующие ПАбудут вставлять в начале каждого параграфа.

Заметьте, что длина первой строки зависит от нескольких факторов, включая ширину страницы, размер шрифта и т.д. Таким образом, обычный параграф HTML:

This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.

строки которого могут быть разбиты так:

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.