: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 Standard
# selector-active
Selectors Level 4
# the-active-pseudo

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

BCD tables only load in the browser

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