Псевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.
Вот список всех псевдоклассов:
- hover - Стиль элемента на который наведён курсор мыши.
- active - Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
- visited - Стиль для недавно посещённой ссылки.
- link - Стиль для нечасто посещаемой ссылки.
- focus - Стиль элемента находящегося в фокусе.
- first-child - Стиль первого дочернего элемента.
- lang - Определяет язык, который используется в фрагменте документа.
О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.
Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:
где:
a - элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover - после двоеточия собственно нужный нам псевдокласс.
- ну и блок объявления стилей в фигурных скобках.
А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку - то она покраснеет.
Так собственно мы подошли к первому, самому популярному, псевдоклассу hover .
Псевдокласс hover.
Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.
Ну а раз уж догадались просто покажу пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. w3.org/TR/html4/loose. dtd">