This page was translated from English by the community. Learn more and join the MDN Web Docs community.
:active
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
/* Любой элемент <a>, который будет активирован */
a:active {
color: red;
}
Псевдокласс :active чаще используется с элементами <a> и <button>, но может применяться и к другим элементам – например элементам форм.
Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.
Примечание:
В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.
Синтаксис
Error: could not find syntax for this itemПример
Активные ссылки
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 # selector-active |
| Selectors Level 4 # active-pseudo |
Совместимость с браузерами
Enable JavaScript to view this browser compatibility table.