/css/pseudo-class_active:> Эффект активации элемента_
Псевдокласс :active
Синтаксис
CSS
[.класс]:active { свойства }
Описание
Псевдокласс :active
указывает веб-браузеру как необходимо изменить элемент при его активации.
Применяется: | В CSS1 применяется только к элементам a с атрибутом «href »;Начиная с CSS2 может применяться к любым элементам. |
---|---|
Регистр символов псевдокласса: | не учитывается; |
Медиа: | визуальные. |
Условия использования
В CSS1 было запрещено одновременное использование данного псевдокласса с такими псевдоклассами как «:link
» и «:visited
». Начиная с CSS2 существовавший запрет был снят, т.о. теперь одновременно может сочетать сразу несколько псевдоклассов («:visited:active
», «:link:active
»).
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Эффект активации элемента</title>
<style type="text/css">
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>
<h1>Псевдокласс ":active"</h1>
<a href="/css/active/ru_css3/">Ссылка</a>
<div class="box">Блок меняющий цвет (при нажатии)</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Эффект активации элемента</title>
<style type="text/css">
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>
<h1>Псевдокласс ":active"</h1>
<a href="/css/active/ru_css3/">Ссылка</a>
<div class="box">Блок меняющий цвет (при нажатии)</div>
</body>
</html>
Эффект активации элемента