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

Псевдоклассы подключают к HTML селекторам или селекторам классов, чтобы определить особое состояние данного селектора. Подобная декларация имеет следующую форму - селектор:псевдокласс { свойство: значение; }, т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.

Многие инициативы CSS не поддерживаются абсолютно всеми браузерами, однако со ссылками можно смело применять четыре псевдокласса:

  • link – не посещенная ссылка.
  • visited – посещенная ссылка.
  • active – ссылка, получившая фокус, активная ссылка.
  • hover – ссылка, на которую наведен курсор мыши.


a.snowman:link {
   color: blue;
}

a.snowman:visited {
   color: purple;
}

a.snowman:active {
   color: red;
}

a.snowman:hover {
   text-decoration: none;
   color: blue;
   background-color: yellow;
}

Назначение иного цвета для посещенных ссылок – это хорошая практика, поскольку многие пользователи этого ожидают, хотя CSS предоставляет возможность этого не делать. Псевдоклассы (кроме, разве что, hover) используются не часто, хотя подобная возможность очень полезна. В связи с этим псевдоклассы потеряли былую важность, но если вы стремитесь к оптимальному пользовательскому удобству, вы просто обязаны их использовать.

Традиционно, не посещенные текстовые ссылки отображаются синим цветом, а посещенные – пурпурным, и есть причины думать, что это наиболее эффективные цвета в данном случае, хотя опять же из-за постоянно растущей популярности CSS среднестатистический пользователь уже больше не ожидает, что ссылка будет синего или пурпурного цвета.

Кроме всего прочего псевдокласс hover может использоваться с любыми элементами, а не только со ссылками. К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.