:active
Псевдокласс :active
соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
/* Любой элемент <a>, который будет активирован */
a:active {
color: red;
}
Псевдокласс :active
чаще используется с элементами <a>
и <button>
, но может применяться и к другим элементам – например элементам форм.
Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link
, :hover
и :visited
, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active
после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link
— :visited
— :hover
— :active
.
Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active
должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.
Синтаксис
Пример
Активные ссылки
HTML
<p>
Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку.
</p>
CSS
/* Непосещённые ссылки */
a:link {
color: blue;
}
/* Посещённые ссылки */
a:visited {
color: purple;
}
/* Ссылки при наведении */
a:hover {
background: yellow;
}
/* Активные ссылки */
a:active {
color: red;
}
/* Активные абзацы */
p:active {
background: #eee;
}
Результат
Активные элементы формы
HTML
<form>
<label for="my-button">Моя кнопка: </label>
<button id="my-button" type="button">
Попробуй Нажать Меня или Мою подсказку!
</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Result
Спецификации
Specification |
---|
HTML Standard # selector-active |
Selectors Level 4 # the-active-pseudo |
Совместимость с браузерами
BCD tables only load in the browser