Поиск

Псевдоклассы

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

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

В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним элементом элемента DIV. Это правило запрещает отступ для первого абзаца элемента DIV:

DIV > P:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
<P>Последний P перед примечанием.
<DIV class="note">
<P>Первый P внутри примечания.
</DIV>
но не сопоставляется второму элементу P в следующем фрагменте:
<P>Последний P перед примечанием.
<DIV class="note">
<H2>Примечание</H2>
<P>Первый P внутри примечания.
</DIV>

В следующем примере устанавливается вес шрифта 'bold' для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:
P:first-child EM { font-weight : bold }

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

Например, EM в: <P>abc <EM>default</EM> является первым дочерним элементом элемента P.

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

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

Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ':link' и ':visited' для различения этих типов ссылок:

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

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

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

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

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

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

<A class="external" href="http://out.side/">external link</A>
была просмотрена, то, согласно правилу:
A.external:visited { color: blue }
она будет представляться синим цветом.
Динамические псевдоклассы :hover, :active и :focus

Иногда интерактивные агенты пользователей изменяют представление документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся случаев:
Псевдокласс :hover применяется, когда пользователь (с помощью некоторого указывающего устройства) выделяет элемент, но не активизирует его. Например, визуальный агент пользователя может применять этот псевдокласс, когда курсор (указатель мыши) находится поверх поля, генерируемого данным элементом. Агенты пользователей, не поддерживающие интерактивные устройства, не используют этот псевдокласс. Некоторые конформные пользовательские агенты, поддерживающие интерактивные устройства, не имеют возможности использовать этот псевдокласс (например, устройство типа ручки).

Псевдокласс :active применяется, когда элемент активизируется пользователем.
Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.
Псевдокласс :focus применяется, когда элемент находится в центре некоторых событий
(обрабатывает события клавиатуры или другие типы ввода текста).

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

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

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

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 }

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

Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.

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

Псевдокласс :lang

Если в языке документа предусмотрен способ определения разговорного языка элемента, то в 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: '"' '"' '39' '3A' }
:lang(fr) > Q { quotes: '" ' ' "' }
:lang(de) > Q { quotes: '"' '"' '39' '3A' }

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