Псевдоклассы — это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.
Вот список всех псевдоклассов:
- 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»>