CSS псевдо-клас :active
відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.
/* Вибирає будь-який <a>, що активується */
a:active {
color: red;
}
Псевдоклас :active
частіш за все використовується на елементах <a>
і <button>
. Інші поширені варіанти застосування цього селектору включають елементи, що містять активований елемент, а також елементи форм, які активуються через асоційований із ними <label>
.
Стилі, задані псевдокласом :active
будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом (:link
, :hover
, чи :visited
), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила :active
після всіх інших споріднених із посиланнями правил, як визначено порядком LVHA: :link
— :visited
— :hover
— :active
.
: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 | Первинне визначення. |
Підтримка у браузерах
BCD tables only load in the browser