CSS псевдо-клас :active  відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.

/* Вибирає будь-який <a>, що активується */
a:active {
  color: red;
}

Псевдоклас :active частіш за все використовується на елементах <a> і <button>. Інші поширені варіанти застосування цього селектору включають елементи, що містять активований елемент, а також елементи форм, які активуються через асоційований із ними  <label>.

Стилі, задані псевдокласом :active будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом (:link, :hover, чи :visited), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила :active після всіх інших споріднених із посиланнями правил, як визначено порядком LVHA: :link:visited:hover:active.

Зауважте, що: на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас :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;
}

Результат

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

Специфікація Статус Примітка
HTML Living Standard
The definition of ':active' in that specification.
Living Standard  
Selectors Level 4
The definition of ':active' in that specification.
Working Draft Без змін.
Selectors Level 3
The definition of ':active' in that specification.
Recommendation Без змін.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recommendation Без змін.
CSS Level 1
The definition of ':active' in that specification.
Recommendation Первинне визначення.

Підтримка у браузерах

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1451
Non-a element support1 Yes1871
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 ? Yes461 ?
Non-a element support1 ? Yes4 ? Yes1 ?

1. By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.

Дивіться також

  • Споріднені з посиланнями псевдокласи: :link, :visited, та :hover

Мітки документа й учасники

Зробили внесок у цю сторінку: AdriandeCita
Востаннє оновлена: AdriandeCita,