Псевдоклассы — что это такое?

Теория

Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. Они обладают следующей структурой: selector:pseudo class { property: value; }, т.е. вам лишь надо поместить двоеточие между селектором и псевдоклассом.

Вы увидите, что многие браузеры не поддерживают ряд положений CSS. Однако существующие четыре псевдокласса 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.

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

Фото



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

структурные псевдоклассы

Видео




Автор Cascading Style Sheets