CSS selector a:active

Селектор :active використовується для вибірки та задання стилю активним посиланням.

Посилання стає активним, коли користувач натискає на нього.

Селектор :active може бути використаний на всіх елементах, а не тільки на посиланнях.

Селектор :active зазвичай використовується після селектора hover

правити

Порада

Використовуйте також селектори :link, :visited та :hover для стилізації посилань.

автор: NagarD правити

Нотатка

Селектор :active майте йти завжди після селектору :hover, якщо він вказаний.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:active {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p><a href="#">Натисни мене й утримуй</a> — тло жовте, доки кнопка миші натиснута.</p>

a:active {
    background-color: yellow;
}

<h1>Заголовок</h1>
<p>Абзац тексту.</p>
<a href="#">Посилання</a>
<p><em>Натисни й утримуй будь-який із цих елементів — його тло стане жовтим.</em></p>

p:active, h1:active, a:active {
    background-color: yellow;
}

<p><a href="#">Невідвідане посилання</a> — зелене.
Наведи курсор — почервоніє, натисни й утримуй — пожовтіє.</p>

/* невідвідане посилання */
a:link {
    color: green;
}

/* відвідане посилання */
a:visited {
    color: darkgreen;
}

/* під курсором */
a:hover {
    color: red;
}

/* у момент натискання */
a:active {
    color: yellow;
}

<p><a class="ex1" href="#">Наведи або натисни — я почервонію</a></p>
<p><a class="ex2" href="#">А я — збільшуся у півтора раза</a></p>

a.ex1:hover, a.ex1:active {
    color: red;
}

a.ex2:hover, a.ex2:active {
    font-size: 150%;
}