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