We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Описание

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши. Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

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

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.

Пример

HTML

<body>
    <h1>Пример CSS-селектора :active</h1>
    <p>Следующая ссылка станет салатовой в момент клика по ней: <a href="#">Mozilla Developer Network</a>.</p>
</body>

CSS

body { background-color: #ffffc9 }
a:link { color: blue } /* непосещённые ссылки */
a:visited { color: purple } /* посещённые ссылки */
a:hover { font-weight: bold } /* пользователь наводит */
a:active { color: lime } /* активные ссылки */

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение ':active' в этой спецификации.
Живой стандарт  
Selectors Level 4
Определение ':active' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':active' в этой спецификации.
Рекомендация Без изменений
CSS Level 2 (Revision 1)
Определение ':active' в этой спецификации.
Рекомендация Без изменений
CSS Level 1
Определение ':active' в этой спецификации.
Рекомендация Первоначальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Поддержка элемента <a> 1.0 1.0 (1.7 или ранее) 4.0 5.0 1.0
Поддержка всех элементов 1.0 1.0 (1.7 или ранее) 8.0 7.0 ?
Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Поддержка элемента <a> 1.0 1.0 (1.0) 6.0 6.0 1.0
Поддержка всех элементов 1.0 1.0 (1.0) ? ? ?[1]

[1] По умолчанию Safari Mobile не использует состояние :active, если не установлен обработчик события touchstart на соответствующем элементе или на <body>.

Смотрите также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: Alinaki, fscholz, harinag, BychekRU, andreww2012, ahtohbi4, teoli, Nuzland
Обновлялась последний раз: Alinaki,