Псевдоклассы

ПсевдоклассыПсевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.

Вот список всех псевдоклассов:

  • 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">