W3docs
ru
Войти

CSS псевдокласс :active

Используйте псевдокласс CSS :active для стилизации активной ссылки. Узнайте о псевдоклассе и попробуйте примеры.

Псевдокласс CSS :active выбирает и стилизует элемент в момент его активации пользователем — чаще всего это краткий промежуток между нажатием кнопки мыши на ссылке или кнопке и её отпусканием. На этой странице объясняется, как работает :active, почему важен порядок правил для ссылок, и приводятся рабочие примеры для ссылок, кнопок и других элементов.

Элемент становится активным, когда пользователь нажимает на него основную кнопку мыши (и остаётся активным до отпускания кнопки). На сенсорных экранах псевдокласс применяется во время касания элемента.

:active чаще всего используется с элементами <a> и <button>, однако может применяться к любому элементу. Он также соответствует элементу, который содержит активированный элемент, и элементам управления формы, активируемым через <label>.

Почему важен порядок правил

Псевдоклассы :link, :visited и :hover могут переопределять стили, заданные для :active, из-за того как каскад разрешает правила с одинаковой специфичностью — побеждает последнее подходящее правило. Чтобы активное состояние было видимым, перечисляйте правила для ссылок в следующем порядке (запомните его как LVHA):

a:link    { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover   { color: #2980b9; } /* mouse over */
a:active  { color: #8ebf42; } /* being clicked */

Располагайте :active после :link, :visited и :hover, иначе предшествующие правила будут его перекрывать.

Примечание

Do not confuse :active with :focus. While :active applies while an element is being activated (e.g., during a mouse click), :focus applies when an element receives keyboard or programmatic focus.

Информация

On systems with multi-button mice, CSS3 specifies that the :active state is triggered by the primary input button (typically the left mouse button).

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

Пример псевдокласса CSS :active

:active {
  css declarations;
}

Пример псевдокласса :active:

Пример кода псевдокласса CSS :active

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:active {
        background-color: #8ebf42;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <a href="https://www.w3docs.com/">w3docs.com</a>
  </body>
</html>
Попробуйте сами »

Пример псевдокласса :active с тегом <a>:

CSS псевдокласс :active, пример кода 2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
      a:active {
        background-color: #8ebf42;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
  </body>
</html>
Попробуйте сами »

В следующем примере нажмите на текст, чтобы увидеть, как меняется цвет.

Пример псевдокласса :active с тегом <div>:

CSS псевдокласс :active, ещё один пример кода

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
      div:active {
        background-color: #666;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>:active selector example</h2>
    <div>
      Lorem ipsum is simply dummy text...
    </div>
  </body>
</html>
Попробуйте сами »

Пример :active для элемента <button>:

Сочетание :active с :hover и :focus — распространённый способ задать кнопкам полный набор интерактивных состояний. Правило :active ниже придаёт кнопке вид «нажатой» при удержании кнопки мыши.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      button {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        background-color: #1c87c9;
        color: #fff;
        cursor: pointer;
      }
      button:hover {
        background-color: #2980b9;
      }
      button:active {
        background-color: #156a9e;
        transform: translateY(2px);
      }
    </style>
  </head>
  <body>
    <h2>:active on a button</h2>
    <button>Press me</button>
  </body>
</html>

Что важно помнить

  • :active vs :focus. :active действует только пока элемент нажат; :focus сохраняется, пока элемент удерживает фокус клавиатуры или программный фокус. Используйте :focus (или :focus-visible) для доступности с клавиатуры — никогда не полагайтесь только на :active, поскольку он недостижим для пользователей, работающих исключительно с клавиатурой.
  • Не убирайте визуальную обратную связь. Стилизация :active, :hover и :focus вместе помогает пользователям понять, что элемент является интерактивным.
  • Специфичность тоже важна. Порядок правил разрешает конфликты только между селекторами одинаковой специфичности. Более специфичный селектор в другом месте всё равно может победить, поэтому держите правила для ссылок на одном уровне специфичности.

Практика

Практика
Для чего предназначен селектор :active в CSS и где его можно использовать?
Для чего предназначен селектор :active в CSS и где его можно использовать?
Was this page helpful?