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, 0 insertions, 129 deletions
diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html deleted file mode 100644 index aa90d1e19b..0000000000 --- a/files/uk/web/css/_colon_active/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |