:active
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Псевдокласс :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 # selector-active |
| Selectors Level 4 # active-pseudo |