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 type="button"> Попробуй Нажать Меня или Мою подсказку! </button></form>CSS
form :active { color: red;}form button { background: white;}Result
Спецификации
| Specification |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |