Псевдоклассы прикрепляются к селекторам для указания состояния или отношения к селектору. Они принимают форму selector:pseudo_class { свойство: значение; }, просто с двоеточием между селектором и псевдоклассом.
Ссылки
link, нацеленные на непросмотренные ссылки и visited, нацеленные, как вы уже догадались, на посещённые ссылки, являются самыми базовыми псевдоклассами.
Ниже будут применены цвета ко всем ссылкам на странице в зависимости от того, посещал ли пользователь эту страницу раньше или нет:
a:link {
color: blue;
}
a:visited {
color: purple;
}
Динамические псевдоклассы
Динамические псевдоклассы, также обычно используемые для ссылок, могут использоваться для применения стилей, когда с чем-то что-то происходит.
Изменение стилей окна при наведении на него курсора.
active предназначены для того, когда пользователь что-то активирует, например, при нажатии на ссылку.
hover предназначен для a, когда что-то передаётся при вводе от пользователя, например, когда курсор перемещается по ссылке.
focus предназначен для того, когда что-то получает фокус, когда оно выбрано с помощью клавиатуры или готово к вводу.
focus чаще всего используется для элементов формы, но может использоваться и для ссылок. Хотя большинство пользователей перемещаются по страницам и между ними с помощью указательного устройства, такого как мышь, те, кто выбирает note to или не может этого сделать, например, люди с ограниченными двигательными возможностями, могут перемещаться с помощью клавиатуры или аналогичного устройства. Ссылки можно переключать между ними с помощью клавиши tab, и они будут получать фокус по одной за раз.
a:active {
color: red;
}
a:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
input:focus, textarea:focus {
background: #eee;
}Псевдокласс first-child
Наконец существует псевдокласс first-child. Он будет нацелен на что-либо, только если это самый первый потомок элемента. Итак, в следующем HTML…
<body>
<p> Я - дитя первого абзаца этого body. Я правлю. Повинуйся мне.</p>
<p> Я обижен на тебя.</p>Если вы хотите оформить только первый абзац, вы могли бы использовать следующий CSS:
p:first-child {
font-weight: bold;
font-size: 40px;
}CSS3 также предоставил совершенно новый набор псевдоклассов: last-child, target, first-of-type и многое другое.
Страницы в тему:
- Следующая страница: Сокращённые свойства
- Предыдущая страница: Группировка и вложенность
- Псевдоэлементы: они выглядят одинаково, но выполняют разные функции
- Селекторы, свойства и значения (Урок CSS для начинающих)
- Селекторы CSS
Примеры CSS:
- Переходы 1 — графические ссылки, которые изменяются при наведении на них курсора с помощью :hover
- Переходы 2 — дополнительные интерактивные эффекты, использующие :active
