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

CSS2.1 определяет три псевдокласса, которые могут изменять внешний вид документа в результате действий пользователя. Эти динамические псевдоклассы традиционно применяются для оформления гиперссылок, но их возможности намного шире.

Как и :link, и :visited, эти псевдоклассы лучше всего известны в контексте гиперссылок. Стили многих веб-страниц выглядят так:

a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

В первых двух правилах применяются статические псевдоклассы, а в двух последних – динамические псевдоклассы. Псевдокласс :active представляет собой аналог атрибута alink в HTML 3.2, хотя, как и раньше, к активным ссылкам можно применять любые цвета и стили. Порядок расположения псевдоклассов в селекторе важнее, чем это может показаться на первый взгляд. Обычная рекомендация – «link-visited-focus-hover-active», хотя она была изменена на «link-visited-focus-hover-active». В следующей главе объясняется, почему этот порядок важен, и обсуждается ряд причин, по которым можно принять решение изменить или даже проигнорировать рекомендуемый порядок расположения.

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


Например, такая разметка:

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

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

Применяя динамические псевдоклассы к обычным элементам, можно осуществить и некоторые довольно необычные операции. Скажем, реализовать эффект подсветки:

body *:hover {background: yellow;}

Согласно этому правилу любой элемент, происходящий от элемента body, при помещении над ним указателя мыши будет приобретать желтый фон. Заголовки, абзацы, списки, таблицы, изображения и любые другие элементы, находящиеся в элементе body, будут изменять свой фон на желтый. Можно также изменить шрифт, заключить такой элемент в рамку или изменить все, что позволит броузер. Internet Explorer для Windows вплоть до версии IE6 не позволяет псевдоклассам выбирать какие-либо элементы, кроме гиперссылок. В IE7 добавлена поддержка :hover для всех элементов, но нет стилей :focus для элементов формы.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы