Pseudo-classe CSS :active
Use a pseudo-classe CSS :active para aplicar estilos ao link ativo. Saiba mais sobre a pseudo-classe e experimente os exemplos.
A pseudo-classe :active é utilizada para selecionar e aplicar estilos ao link ativo ou a qualquer outro elemento. É ativada pelo utilizador.
Um elemento torna-se ativo quando o utilizador clica no link ou no elemento e mantém premido o botão do rato.
A pseudo-classe :active é utilizada nos elementos <a> e <button>. Esta pseudo-classe também seleciona os elementos que contêm um elemento ativado e os elementos de formulário que são ativados através do elemento <label>.
As pseudo-classes :link, :hover ou :visited substituem a definição especificada pela pseudo-classe :active. Para aplicar estilos aos links de forma adequada, a regra :active deve ser colocada depois de todas as outras regras relacionadas com links (:link, :visited, :hover, :active).
Não confunda :active com :focus. Enquanto :active se aplica durante a ativação de um elemento (por exemplo, durante um clique do rato), :focus aplica-se quando um elemento recebe o foco através do teclado ou de forma programática.
Em sistemas com ratos de vários botões, as especificações CSS3 determinam que o estado :active é despoletado pelo botão de entrada principal (normalmente o botão esquerdo do rato).
Versão
Sintaxe
Exemplo da pseudo-classe CSS :active
:active {
css declarations;
}Exemplo da pseudo-classe :active:
Exemplo de código da pseudo-classe 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>Exemplo da pseudo-classe :active com a tag <a>:
Pseudo-classe CSS :active, exemplo de código 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>No exemplo seguinte, clique no texto para ver como a cor muda.
Exemplo da pseudo-classe :active com a tag <div>:
Pseudo-classe CSS :active, outro exemplo de código
<!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>