From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/css/_colon_active/index.html | 129 ++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/uk/web/css/_colon_active/index.html (limited to 'files/uk/web/css/_colon_active') diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html new file mode 100644 index 0000000000..f85ba17940 --- /dev/null +++ b/files/uk/web/css/_colon_active/index.html @@ -0,0 +1,129 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Веб + - Довідка + - Макет + - Псевдоклас +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

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

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

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

+ +

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

+ +
Зауважте, що: на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас :active повинен застосовуватись лише для основної кнопки; у випадку правосторонньої миші це зазвичай крайня ліва кнопка.
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Приклади

+ +

Активні посилання

+ +

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; }   /* Активні абзаци */
+ +

Результат

+ +

{{EmbedLiveSample('Активні_посилання')}}

+ +

Активні елементи форм

+ +

HTML

+ +
<form>
+  <label for="my-button">Моя кнопка: </label>
+  <button id="my-button" type="button">Спробуйте натиснути на мене чи на мою мітку!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Активні_елементи_форм')}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Без змін.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Без змін.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Без змін.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Первинне визначення.
+ +

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

+ +
+ + +

{{Compat("css.selectors.active")}}

+
+ +

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

+ + -- cgit v1.2.3-54-g00ecf