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

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

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

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

Данный селектор сопоставляется элементу Р внутри элемента DIV в следующем фрагменте:

<Р>Последний Р перед примечанием.

<DIV class="note">

<Р>Первый Р внутри примечания.

Однако в следующем фрагменте он не сопоставляется элементу Р, так как он второй, а первым дочерним элементом DIV является теперь тег <Н2>:

<Р>Последний Р перед примечанием. <DIV class="note">

<Н2>Примечание</Н2>

<Р>Первый Р внутри примечания.

В следующем примере устанавливается ширина шрифта bold для каждого эле­мента ЕМ, являющегося одним из потомков первого дочернего элемента Р:

Р:first-chiId EM { font-weight : bold }

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

<Р>Это <ЕМ>жирный</ЕМ> текст.</Р>

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

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

- псевдокласс : link применяется, если пользователь не просматривал ссылку;

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

В HTML псевдоклассы ссылок применяются к тегам <А> с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:

A :link { color: red }

:link {color: red }

Допустим, пользователь просмотрел такую ссылку:

<А class="external" href="http://yoursite.com/">nepeйти</A>

Тогда она будет представляться синим цветом согласно следующему правилу:

A.external:visited { color: blue }

Динамические псевдоклассы

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

:hover применяется, когда пользователь выделяет некоторый элемент (как правило, с помощью мыши), но не активизирует его;

:active используется, когда пользователь активизирует элемент, например от

момента, когда он нажал кнопку мыши, до момента, когда он ее отпустил;

:focus применяется, когда элемент находится в «центре событий», например обрабатывает нажатия клавиш клавиатуры или другие типы ввода текста.

Сколько псевдоклассов могут одновременно сопоставляться элементу, на­пример:

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

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

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

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

Обратите внимание, что правило А: hover должно располагаться после правил A: link и A:visited.

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