CSS :active — стиль елемента в момент натискання
CSS-селектор :active задає стиль елемента в момент натискання — поки кнопку миші чи палець не відпустили.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте також селектори
автор: NagarD:link,:visitedта:hoverдля стилізації посилань. - Нотатка
-
Селектор
автор: NagarD:activeмайте йти завжди після селектору:hover, якщо він вказаний.
Синтаксис
:active {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Поки кнопка миші натиснута на посиланні, спрацьовує селектор :active.
HTML
<p><a href="#">Натисни мене й утримуй</a> — тло жовте, доки кнопка миші натиснута.</p>CSS
a:active {
background-color: yellow;
}Селектор :active працює не лише з посиланнями: тут він стилізує <p>, <h1> та <a> у момент натискання.
HTML
<h1>Заголовок</h1>
<p>Абзац тексту.</p>
<a href="#">Посилання</a>
<p><em>Натисни й утримуй будь-який із цих елементів — його тло стане жовтим.</em></p>CSS
p:active, h1:active, a:active {
background-color: yellow;
}Чотири стани посилання разом. Порядок правил не випадковий — link, visited, hover, active: :hover мусить іти після :link і :visited, а :active — після :hover, інакше пізніші правила перекриють ранні.
HTML
<p><a href="#">Невідвідане посилання</a> — зелене.
Наведи курсор — почервоніє, натисни й утримуй — пожовтіє.</p>CSS
/* невідвідане посилання */
a:link {
color: green;
}
/* відвідане посилання */
a:visited {
color: darkgreen;
}
/* під курсором */
a:hover {
color: red;
}
/* у момент натискання */
a:active {
color: yellow;
}Різна реакція на наведення й натискання залежно від класу: перше посилання змінює колір, друге — розмір шрифту.
HTML
<p><a class="ex1" href="#">Наведи або натисни — я почервонію</a></p>
<p><a class="ex2" href="#">А я — збільшуся у півтора раза</a></p>CSS
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}Кнопка, що втоплюється під натисканням: зсув на пікселі вниз і слабша тінь читаються як фізичне натискання.
HTML
<button class="press">Натисни й потримай</button>CSS
.press {
padding: 12px 22px;
border: 0;
border-radius: 8px;
background: #2563eb;
color: #fff;
font: 16px system-ui, sans-serif;
cursor: pointer;
box-shadow: 0 4px 0 #1e40af;
/* плавним робимо ПОВЕРНЕННЯ: саме натискання має бути миттєвим */
transition: box-shadow .18s, transform .18s;
}
.press:hover {
background: #1d4ed8;
}
.press:active {
transform: translateY(4px);
box-shadow: 0 0 0 #1e40af;
transition: none;
}Порядок LVHA: :active оголошено після :hover, тому натискання видно. Переставте два правила місцями — і воно зникне.
HTML
<p><a class="lvha" href="#">Посилання: наведіть, потім натисніть і потримайте</a></p>CSS
.lvha {
font: 16px system-ui, sans-serif;
text-decoration: none;
}
/* L → V → H → A: кожен наступний стан перекриває попередній */
.lvha:link { color: #2563eb; }
.lvha:visited { color: #7c3aed; }
.lvha:hover { color: #1d4ed8; text-decoration: underline; }
.lvha:active { color: #dc2626; }Коментарі
Коментарів ще немає — будьте першим!