CSS :active Pseudo Classe
Use a pseudo-classe CSS :active para estilizar links ativos. Saiba mais e experimente exemplos práticos.
A pseudo-classe CSS :active seleciona e estiliza um elemento enquanto ele está sendo ativado pelo utilizador — geralmente o breve momento entre pressionar o botão do rato sobre um link ou botão e soltá-lo. Esta página explica como :active funciona, por que a ordem das regras de link é importante, e apresenta exemplos executáveis para links, botões e outros elementos.
Um elemento torna-se ativo quando o utilizador pressiona o botão principal do rato sobre ele (e permanece ativo até o botão ser solto). Em ecrãs tácteis, aplica-se enquanto o elemento está a ser tocado.
:active é mais frequentemente usado nos elementos <a> e <button>, mas pode afetar qualquer elemento. Também corresponde a um elemento que contém um elemento ativado, e a controles de formulário ativados por meio do seu <label>.
Por que a ordem das regras é importante
As pseudo-classes :link, :visited e :hover podem substituir os estilos definidos por :active devido à forma como a cascata resolve regras com especificidade igual — a última regra correspondente vence. Para tornar o estado ativo visível, liste as regras relacionadas com links nesta ordem exata (lembre-se como LVHA):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */Coloque :active após :link, :visited e :hover, caso contrário as regras anteriores iriam sobrepô-lo.
Não confunda :active com :focus. Enquanto :active se aplica enquanto um elemento está a ser ativado (por exemplo, durante um clique do rato), :focus aplica-se quando um elemento recebe foco por teclado ou programático.
Em sistemas com ratos multi-botão, o CSS3 especifica que o estado :active é ativado pelo botão de entrada principal (tipicamente o botão esquerdo do rato).
Versão
Sintaxe
Exemplo de CSS :active Pseudo Classe
:active {
css declarations;
}Exemplo da pseudo-classe :active:
Exemplo de código CSS :active Pseudo Classe
<!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>:
CSS :active Pseudo Classe, 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 a seguir, clique no texto para ver como a cor muda.
Exemplo da pseudo-classe :active com a tag <div>:
CSS :active Pseudo Classe, 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>Exemplo de :active num <button>:
Combinar :active com :hover e :focus é uma forma comum de dar aos botões um conjunto completo de estados interativos. A regra :active abaixo dá ao botão uma aparência de "pressionado" enquanto o botão do rato está pressionado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Pontos importantes a considerar
:activevs:focus.:activedura apenas enquanto o elemento está a ser pressionado;:focuspersiste enquanto o elemento mantém o foco por teclado/programático. Use:focus(ou:focus-visible) para acessibilidade por teclado — nunca dependa apenas de:active, pois é inacessível para utilizadores que usam exclusivamente o teclado.- Não remova todo o feedback visual. Estilizar
:active,:hovere:focusem conjunto ajuda os utilizadores a perceber que um elemento é interativo. - A especificidade também é importante. A ordem das regras apenas resolve empates entre seletores de igual especificidade. Um seletor mais específico noutro lugar ainda pode vencer, por isso mantenha as suas regras de link no mesmo nível de especificidade.