CSS псевдокласс :active
Псевдокласс :active используется для выделения и стилизации активной ссылки или любого другого элемента. Он активируется пользователем.
Элемент становится активным, когда пользователь нажимает на ссылку или элемент и удерживает кнопку мыши нажатой.
Псевдокласс :active применяется к элементам <a> и <button>. Этот псевдокласс также применяется к элементам, содержащим активированный элемент, и к элементам форм, которые активируются через элемент <label>.
Псевдоклассы :link, :hover или :visited переопределяют определение, заданное псевдоклассом :active. Для правильной стилизации ссылок правило :active должно располагаться после всех остальных правил, связанных со ссылками (:link, :visited, :hover, :active).
note
Не путайте
:activeс:focus. В то время как:activeприменяется, пока элемент активируется (например, во время нажатия мыши),:focusприменяется, когда элемент получает фокус с клавиатуры или программно.
INFO
На системах с многокнопочными мышами CSS3 определяет, что состояние :active активируется основной кнопкой ввода (обычно левой кнопкой мыши).
Версия
Синтаксис
Пример псевдокласса 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 в CSS и где его можно использовать?