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

Псевдокласс :active определяет стиль для активной ссылки или любого другого элемента. Он активируется пользователем.

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

Псевдокласс :active используется для элементов <a> и <button> .

Псевдоклассы :link, :hover или :visited переопределяют стиль, установленный псевдоклассом :active.

Версия

CSS1

Синтаксис

:active {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a:active {
      background-color: #8ebf42;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :active</h2>
    <a href="https://www.w3docs.com/">w3docs.com</a>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a {
      color: #1c87c9;
      }
      a:active {
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :active</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Попробуйте сами!

В следующем примере нажмите на текст и увидите, как изменится цвет текста:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      padding: 30px;
      background-color: #8ebf42;
      color:#eee;
      }
      div:active {
      background-color: #666;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :active</h2>
    <div>
      Lorem Ipsum - это текст-"рыба"...
    </div>
  </body>
</html>