Пseudo-класс :active в CSS

Определение и использование

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

:active Псевдо-классы наиболее часто используются <a> и <button> Элементы. При нажатии на ссылку, она активируется; так же и для кнопок.

Совет:Использование :link Установить стиль для ссылок на не посещенных страницах, используя :visited Установить стиль для ссылок на посещенных страницах, используя :hover Установить стиль для ссылок при наведении мыши.

Внимание:В CSS определениях::active Должен быть放在 :hover(! если есть) перед тем, как это будет生效!

Пример

Пример 1

Выберите и установите стиль для активированных ссылок:

a:active {
  background-color: yellow;
}

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

Пример 2

Выберите и установите стиль для элементов <button> при нажатии пользователя:

button:active {
  background-color: pink;
}

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

Пример 3

Выберите и установите стили для элементов <p>, <h1> и <a> при нажатии:

p:active, h1:active, a:active {
  background-color: yellow;
}

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

Пример 4

Выберите и установите стили для не посещенных, посещенных, наведенных и активированных ссылок:

/* Не посещенная ссылка */
a:link {
  color: green;
}
/* Посещенная ссылка */
a:visited {
  color: green;
}
/* Ссылка при наведении мыши */
a:hover {
  color: red;
}
/* Активированная ссылка */
a:active {
  color: yellow;
}

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

Пример 5

Установить различные стили для ссылок:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

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

CSS Грамматика

:active {
  css declarations;
}

Технические детали

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдо-класс.

Связанные страницы

Урок:CSS Ссылки

Урок:CSS Кнопки

Урок:CSS Псевдо-классы