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 Первинне визначення.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 4Opera Full support 5Safari Full support 1WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android ?
Non-a element supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes 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.
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

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

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

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

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