diff options
Diffstat (limited to 'files/uk/web/css/_colon_active/index.html')
| -rw-r--r-- | files/uk/web/css/_colon_active/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
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' +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS псевдо-клас</a> <strong><code>:active</code></strong> відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.</p> + +<pre class="brush: css no-line-numbers">/* Вибирає будь-який <a>, що активується */ +a:active { + color: red; +}</pre> + +<p>Псевдоклас <code>:active</code> частіш за все використовується на елементах {{HTMLElement("a")}} і {{HTMLElement("button")}}. Інші поширені варіанти застосування цього селектору включають елементи, що <em>містять</em> активований елемент, а також елементи форм, які активуються через асоційований із ними {{HTMLElement("label")}}.</p> + +<p>Стилі, задані псевдокласом <code>:active</code> будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом ({{cssxref(":link")}}, {{cssxref(":hover")}}, чи {{cssxref(":visited")}}), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила <code>:active</code> після всіх інших споріднених із посиланнями правил, як визначено порядком <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Зауважте, що:</strong> на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас <code>:active</code> повинен застосовуватись лише для основної кнопки; у випадку правосторонньої миші це зазвичай крайня ліва кнопка.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Активні_посилання">Активні посилання</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Цей абзац містить посилання: + <a href="#">Це посилання буде забарвлено у червоний при натисканні на нього.</a> + Цей абзац отримає сірий фон при натисканні на посилання. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a:link { color: blue; } /* Невідвідані посилання */ +a:visited { color: purple; } /* Відвідані посилання */ +a:hover { background: yellow; } /* Посилання із наведеним курсором */ +a:active { color: red; } /* Активні посилання */ + +p:active { background: #eee; } /* Активні абзаци */</pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Активні_посилання')}}</p> + +<h3 id="Активні_елементи_форм">Активні елементи форм</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form> + <label for="my-button">Моя кнопка: </label> + <button id="my-button" type="button">Спробуйте натиснути на мене чи на мою мітку!</button> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">form :active { + color: red; +} + +form button { + background: white; +}</pre> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Активні_елементи_форм')}}</p> + +<h2 id="Специфікації"><span>Специфікації</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Примітка</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первинне визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_у_браузерах">Підтримка у браузерах</h2> + +<div> +<div class="hidden">Таблиця сумісності на цій сторінці сформована автоматично із структурованих даних. Якщо ви маєте бажання зробити свій внесок до цих даних - будь-ласка, ось репозиторій <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, надішліть нам свій pull request.</div> + +<p>{{Compat("css.selectors.active")}}</p> +</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>Споріднені з посиланнями псевдокласи: {{cssxref(":link")}}, {{cssxref(":visited")}}, та {{cssxref(":hover")}}</li> +</ul> |