... Теория...
Quote (Определение)
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа.
Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши.
При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий:
Quote (Code)
Элемент:Псевдокласс {Описание правил стиля}
Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса.
Допускается применять псевдоклассы к именам идентификаторов или классов и контекстным селекторам.
Quote (Пример)
a.menu:hover {color:green}
.menu a:hover {background:#F0F;}
Условно все псевдоклассы делятся на группы:
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.
- :active
Происходит при активации пользователем элемента. Например, при наведении курсора на ссылку и нажатии левой кнопки мыши.
- :link
Применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.
- :focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле.
- :hover
Псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
- :visited
Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно.
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.
P.S. Примеры - выложу позже ...
Flesh
