5.11. Псевдо-классы.

5.11.1. Псевдо-класс :first-child.

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

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

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

Этот селектор будет согласовываться с Р внутри DIV в следующем фрагменте:

<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

но не будет согласовываться со вторым Р в следующем фрагменте:

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

Ниже следующее правило устанавливает толщину шрифта как 'bold' (утолщенный) для элемента EM, который является наследником элемента Р, который является первым дочерним элементом:

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

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

Например, ЕМ:

<P>abc <EM>default</EM>

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

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

* > A:first-child   /* A is first child of any element */
A:first-child       /* Same */

5.11.2. Псевдо-классы для ссылок: :link и :visited.

Устройства вывода обычно выводят на экран не посещенные ссылки отличным образом от уже посещенных. CSS предоставляет псевдо-классы :link и :visited для их разделения:

• Псевдо-класс :link применяет для ссылки, которую еще не посещали.
• Псевдо-класс :visited применяется для ссылки, которая была посещена пользователем.

Обратите внимание. После определенного времени устройства вывода могут вернуть посещенную ссылку к состоянию :link (не посещенная).

Оба заявления взаимно исключающие.

Язык документа определяет, какой элемент является якорем (anchor) для источника гиперссылки. Например, в HTML 4.0 псевдо-классы ссылок применяют элементы А с атрибутом "href". Таким образом, следующие две декларации CSS2, имеют один и тот же эффект:

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

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

<A class="external" href="http://out.side/">external link</A>

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

A.external:visited { color: blue }

изменит цвет ссылки на голубой.

5.11.3. Динамические псевдо-классы: :hover, :active, и :focus.

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

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

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

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

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

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

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

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

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

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

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

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

5.11.4. Псевдо-класс для языков: :lang.

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

Псевдо-класс ':lang(C)' согласуется, если элемент находится в языке С. Здесь С – это языковый код, как определено в HTML 4.0 и RFC 1766. Он согласуется таким же способом, как для оператора '|='.

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

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

Вторая пара правил фактически устанавливает свойства 'quotes' для элемента Q в соответствии с языком его родителя. Это происходит из-за того, что выбор знаков кавычек обычно основан на языке элемента вокруг кавычки, а не на самой кавычке: подобно тому, как этот французский кусочек текста ‛à l'improviste“ в середине английского текста использует английские знаки кавычек.