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

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

•:active – используется, когда элемент активизируется посетителем. Например, между моментами, когда он нажимает кнопку мыши и отпускает ее.

•:focus – применяется, когда элемент находится в центре некоторых событий. Например, обрабатывает события клавиатуры или другие типы ввода текста.

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

a:link { color: red } /* непросмотренные ссылки */

a:visited { color: blue } /* просмотренные ссылки */

a:hover { color: yellow } /* ссылка, над которой в данный момент находится указатель */

a:active { color: white } /* активные ссылки */

Обратите внимание, что правило a: hover должно располагаться после правил a: link и a: visited, так как в противном случае правила каскадирования скроют свойство color правила a: hover. Аналогичным образом благодаря тому, что a: active находится после a: hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Рассмотрим пример сочетания динамических псевдоклассов:

a:focus { background: yellow }

a:focus:hover { background: white }

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

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

Псевдокласс: lang (ru) сопоставляется элементу, использующему язык ru. Здесь ru – код языка. Он сопоставляется аналогично оператору |=. Приведу для примера несколько языков и коды:

• ru – русский;

• en – английский;

• fr – французский;

• de – немецкий;

• jp – японский.

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

html:lang(fr) { quotes: " " }

html:lang(de) { quotes: " " \2039 \203A }

:lang(fr) > Q { quotes: " " }

:lang(de) > Q { quotes: " " \2039 \203A }

Вторая пара правил фактически задает свойство quotes для элементов Q в соответствии с языком их родительских элементов. Это сделано потому, что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста «а limproviste», расположенного в английском тексте и использующего английские кавычки.