HTML и CSS с примерами кода
Псевдокласс :active
соответствует элементу в момент, когда он активируется пользователем.
Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши. Также псевдокласс :active
срабатывает при использовании клавишы TAB
на клавиатуре. Обычно это используется для HTML-элементов <a>
и <button>
, но может применяться и к другим элементам.
Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link
, :hover
и :visited
, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active
после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link
— :visited
— :hover
:active
.Примечание: В системах с много-кнопочными мышами, CSS3 указывает, что псевдокласс :active
должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис
/* Selects any <a> that is being activated */ a:active { color: red; }
Спецификации
- HTML Living Standard
- Selectors Level 4
- Selectors Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры
HTMLCSS
<a href="#">This link will turn lime while you click on it. </a>
/* Unvisited links */ a:link { color: blue; } /* Visited links */ a:visited { color: purple; } /* User hovers */ a:hover { background: yellow; } /* Active links */ a:active { color: lime; }
См. также
- Связанные псевдоклассы
:link
,:visited
,:hover
Ссылки
- Псевдо-класс
:active
MDN (рус.)
CSS/Псевдокласс :active
Синтаксис
[.класс]:active { свойства }
Описание
Псевдокласс :active
указывает веб-браузеру как необходимо изменить элемент при его активации.
Применяется: | В CSS1 применяется только к элементам a с атрибутом «href »;Начиная с CSS2 может применяться к любым элементам. |
---|---|
Регистр символов псевдокласса: | не учитывается; |
Медиа: | визуальные. |
Условия использования
В CSS1 было запрещено одновременное использование данного псевдокласса с такими псевдоклассами как «:link
» и «:visited
». Начиная с CSS2 существовавший запрет был снят, т.о. теперь одновременно может сочетать сразу несколько псевдоклассов («:visited:active
», «:link:active
»).
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
CSS | Раздел | |
---|---|---|
1 | Перевод | |
2 | 5. 11.3 The dynamic pseudo-classes: :hover, :active, and :focus | |
2.1 | 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus | Перевод |
2.2 | 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus | |
3 | 6.6.1.2. The user action pseudo-classes :hover, :active, and :focus | Перевод |
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Эффект активации элемента</title>
a:active { color: yellow; }
a:visited:active { color: pink; }
.box {
width: 300px;
height: 30px;
background-color: green;
}
div:active {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h2>Псевдокласс «:active»</h2>
<a href=»/css/active/ru_css3/»>Ссылка</a>
<div>Блок меняющий цвет (при нажатии)</div>
</body>
</html>
Эффект активации элемента
CSS :active Селектор
❮ Предыдущий Справочник по селекторам CSS Далее ❯
Пример
Выберите и настройте активную ссылку:
a:active
{
цвет фона: желтый;
}
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
:active
используется для выбора и оформления активной ссылки.Ссылка становится активной при нажатии на нее.
Совет: Селектор :active можно использовать для всех элементов, кроме только ссылки.
Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и селектор :hover для оформления ссылок при наведении курсора их.
Примечание: :active ДОЛЖЕН идти после :hover (если присутствует) в CSS определение для того, чтобы быть эффективным!
Версия: | УС1 |
---|
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
Селектор | |||||
---|---|---|---|---|---|
:активный | 4,0 | 7,0 | 2,0 | 3. 1 | 9,6 |
Синтаксис CSS
:актив {
объявления css ;
}
Дополнительные примеры
Пример
Выбор и стиль элемента
,
и
при щелчке по нему: p:active, h2:active, a:active {
цвет фона: желтый;
}
Попробуйте сами »
Пример
Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:
/* непросмотренная ссылка */
a:link {
color: green;
}
/* посещенная ссылка */
a:посетили {
цвет: зеленый;
}
/* указатель мыши над ссылкой */
a:hover {
}
/* выбранная ссылка */
a:active {
цвет: желтый;
}
Попробуйте сами »
Пример
Ссылки на разные стили:
a. ex1: hover, a.ex1: active {
цвет: красный;
}
a.ex2:hover, a.ex2:active {
размер шрифта: 150%;
}
Попробуйте сами »
Связанные страницы
Учебник CSS: Ссылки CSS
Учебник CSS: Псевдоклассы CSS
❮ Предыдущая Справочник по селекторам CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
5 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
:активный | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
Псевдоселектор :active
изменяет внешний вид ссылки во время ее активации (щелчка или другой активации). Обычно это видно только на долю секунды и обеспечивает визуальную обратную связь о том, что элемент действительно был нажат. Чаще всего он используется в якорных ссылках (
).
Например, вот CSS, который заставит якорные ссылки смещаться на один пиксель вниз (создавая впечатление, будто их толкают в трехмерном пространстве) в активном состоянии:
:active
также может применяться к любому элементу. В приведенном ниже ручке щелчок в любом месте страницы сделает всю страницу желтой:
Рекомендуется охватить все «состояния», особенно для ссылок. Самый простой способ сделать это — «LOVE HATE» или
- 9.0232 L
- O
- V
:visited
- E
:link
- H
:hover
- A
:active
- T
- E
Лучше всего выполнять их в таком порядке.
a:link { /* Фактически означает a[href] или что ссылка действительно куда-то ведет */ цвет синий; } а: посетил { цвет: фиолетовый; } а: наведите { цвет: зеленый; } а: активный { красный цвет; }
В противном случае, скажем, если вы указали стиль :visited
последним, если эта ссылка была посещена, она переопределит объявление :active
и :hover
, и ссылка всегда будет фиолетовой, независимо от того, были ли вы наведены или если ссылка была активной (не идеальной).
Browser support
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
All | All | All | All | All | All |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
---|---|---|---|---|
All | Все | Все | Все | Все |