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

Псевдоклассы прикрепляются к селекторам для указания состояния или отношения к селектору. Они принимают форму selector:pseudo_class { свойство: значение; }, просто с двоеточием между селектором и псевдоклассом.

Ссылки

link, нацеленные на непросмотренные ссылки и visited, нацеленные, как вы уже догадались, на посещённые ссылки, являются самыми базовыми псевдоклассами.

Ниже будут применены цвета ко всем ссылкам на странице в зависимости от того, посещал ли пользователь эту страницу раньше или нет:

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

Динамические псевдоклассы

Динамические псевдоклассы, также обычно используемые для ссылок, могут использоваться для применения стилей, когда с чем-то что-то происходит.

pseudo-classes

Изменение стилей окна при наведении на него курсора.

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:

  • Переходы 1 — графические ссылки, которые изменяются при наведении на них курсора с помощью :hover
  • Переходы 2 — дополнительные интерактивные эффекты, использующие :active

Добавить комментарий