:active

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

/*  Любой элемент <a>, который будет активирован */
a:active {
  color: red;
}

Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link:visited:hover:active.

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.

Синтаксис

: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

Спецификации

Спецификация Статус Комментарий
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

Смотрите также