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

Браузеры позволяют менять вид элементов 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, активная ссылка отображается белым цветом когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Псевдоэлемент :first-line

Псевдоэлемент :first-line задает стиль первой строки абзаца, например:

P:first-line { text-transform: uppercase }

Представленное выше правило делает буквы первой строки каждого абзаца заглав­ными. Селектор Р:first-line не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который браузеры будут помещать в на­чало каждого абзаца.

Обратите внимание, что длина первой строки зависит от множества факторов: от ширины страницы, размера шрифта и т. д. Поэтому типичный абзац HTML-доку­мента выглядит так:

<Р>Этот длинный абзац HTML-документа будет разбит на несколько строк.</Р>

Строки этого абзаца будут преобразованы следующим образом:

это длинный абзац HTML-документа, будет разбит на несколько строк.

К псевдоэлементу :first-line применяются свойства шрифтов, цвета, фона,

word-spacing,letter-spacing,text-decoration,vertical-align,text-transform

line-height, text-shadow и clear.