Псевдоклассы гиперссылок

В CSS существует четыре псевдокласса, позволяющих работать с гиперссылками:

link ­ обозначает не посещенную гиперссылку;

active ­ обозначает активную гиперссылку;

visited ­ обозначает посещенную гиперссылку;

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

При этом, если псевдоклассы :link и :visited могут использоваться только для гиперссылок, то псевдоклассы :active и :hover могут применяться и для стилизации и других элементов на веб-странице.

Чтобы с помощью четырех перечисленных выше псевдоклассов задать внешний вид гиперссылок, нужно написать следующие правила:

a:link{

... стиль оформления не посещенной гиперссылки ...

}

a:active{

... стиль оформления активной гиперссылки ...

}

a:visited{

... стиль оформления посещенной гиперссылки ...

}

И, наконец, то, чего невозможно было сделать средствами HTML, ­ задание стиля гиперссылки, на которую наведен указатель мыши:

a:hover{

... стиль оформления гиперссылки, на которую наведена мышь ...

}

­Псевдоклассы можно использовать в комбинации с обычными классами и идентификаторами:

a.pagelink:hover{

... стиль оформления гиперссылки, на которую наведена мышь ...

}

a#mylink:visited{

... стиль оформления посещенной гиперссылки ...

}

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

<a class="pagelink" href="page1.html">Текст гиперссылки 1</a>

<a id="mylink" href="page2.html">Текст гиперссылки 2</a>

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

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

input :focus {background: silver; font-weight: bold; }

позволяет выделять элемент формы, который получает вводимые с клавиатуры данные.

Хотя псевдоклассы :active и :hover первоначально предназначались для стилизации гиперссылок, как было рассмотрено выше, они могут применяться и к обычным элементам. С их помощью можно выполнять довольно необычные операции, например, реализовать эффект подсветки:

div * :hover {background: yellow; }

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

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

Статический псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу заданного типа. В качестве примера рассмотрим следующий фрагмент HTML-страницы:

<div>

<p>Обязательная последовательность действий:</p>

<ul>

<li>Вставьте ключ.</li>

<li>Поверните ключ <strong>по часовой стрелке</strong>.</li>

<li>Нажмите акселератор.</li>

</ul>

<p>

Тормоз <em>нельзя</em> нажимать одновременно с акселератором!

</p>

</div>

Первыми дочерними элементами в данном фрагменте являются: первый p, первый li, и элементы strong и em.

Применим к этому фрагменту следующие два правила:

p:first-child {font-weight: bold;}

li:first-child {text-transform: uppercase;}

В результате на экране появится:

Обязательная последовательность действий:

• ВСТАВЬТЕ КЛЮЧ.

• Поверните ключ по часовой стрелке.

• Нажмите акселератор.

Тормоз нельзя нажимать одновременно с акселератором!

Первое правило выделит полужирным шрифтом первый абзац, а второе – выведет заглавными буквами текст первого элемента списка.