Псевдоклассы применяющиеся к определенному состоянию элементов
17:46 10 Дек. 2007 Автор: Кирилл ИвановСуществуют псевдоклассы, применяющие стиль к элементу только в том случае, если тот меняет свое состояние. Рассмотрим эти псевдоэлементы более подробно.
Псевдокласс link
Псевдокласс link служит для задания стиля ссылке, переход по которой пользователем еще не осуществлялся. Запись a{…} и a:link{…} в принципе идентична, другими словами при просмотре в браузере происходит один и тот же эффект. Поэтому, для удобства, ее можно не указывать.
Псевдокласс active
Этот псевдокласс действует при активации того или иного элемента. Например после того как пользователь нажал левой кнопкой мыши на ссылку.
Псевдокласс hover
Данный псевдокласс служит для выделения элемента в момент наведения на него курсора (но только до щелчка мышкой по элементу).
Псевдокласс visited
Этот псевдокласс применяется к посещенным ссылкам. По умолчанию ссылка, после того как пользователь осуществил переход по ней, меняет свой цвет на фиолетовый, но при желании, можно задать другой цвет, а также и другие параметры отображения ссылки, такие как например размер шрифта.
a{font-size: 90%; color:red;}a:visited{font-size: 90%; color:green;}a:active{font-size: 90%; color:yellow;}a:hover{font-size: 90%; color:blue;}
На рисунке показано действие всех вышеперечисленных псевдоклассов. Для удобства в качестве примера взята ссылка. Под номером 1 ссылка в обычном своем состоянии. Под номером 2 она показана так, как выглядит во время щелчка мышкой по ней (active). Под цифрой 3 предоставлена ссылка во время наведения на нее курсора мыши (hover). Последний пункт показывает как будет выглядеть уже посещенная ссылка (visited).
Псевдоклассы link и visited могут быть применены только к ссылкам, в отличие от псевдоклассов hover и active, которые в свою очередь применяются и к другим элементам документа (до 6 версии IE поддерживает данное свойство только для ссылок, начиная с 7 версии эти псевдоклассы можно добавлять к другим элементам).
Псевдокласс focus
Данный псевдокласс применяется к элементу, когда тот получает фокус. Чтобы было понятнее рассмотрим следующий пример:
<!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Transitional//EN″″http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd″><html xmlns=″http://www.w3.org/1999/xhtml″><head><meta http-equiv=″Content-Type″ content=″text/html; charset=utf-8″/><style>input:focus {background:green;}</style></head><body><form action=″″><p>input type=″text″ value=″Содержимое″></p></form></body></html>
На рисунке представлено текстовое поле формы. До щелчка по нему оно оставалось белым. При щелчке мышкой по полю формы, оно получает фокус, и цвет фона изменяется на зеленый. Потеря полем фокуса произойдет при щелчке в любом другом месте страницы. Псевдокласс focus не поддерживается браузером IE.