Квинт Игорь
Шрифт:
•:link – применяется, если ссылка не была просмотрена;
•:visited – используется, если ссылка была просмотрена посетителем.
Язык HTML определяет элементы, которые служат точками привязки гиперссылки. В HTML 4 псевдоклассы ссылок применяются к элементам A с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:
a:link { color: red }
:link { color: red }
Если ссылка <a class="external" href=http://yoursite.com/>перейти</a> была просмотрена, то согласно правилу a.external:visited { color: blue } она будет представляться синим цветом.
Динамические псевдоклассы
Иногда браузеры пользователей изменяют вид элементов 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.
Псевдокласс :lang
Если в языке 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», расположенного в английском тексте и использующего английские кавычки.
Псевдоэлемент first-line
Псевдоэлемент: first-line используется для применения стилей к первой строке абзаца. Например:
p:first-line { text-transform: uppercase }
Представленное выше правило указывает сделать буквы первой строки каждого абзаца заглавными. Однако селектор p: first-line не соответствует ни одному реальному HTML-элементу. Он сопоставляется псевдоэлементу, который браузеры пользователей будут помещать в начало каждого абзаца.