: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 соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

css
/*  Любой элемент <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

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

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

Specification
HTML
# selector-active
Selectors Level 4
# active-pseudo

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:active
Non-a element support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

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