Pseudo-classe :active do CSS

Definição e uso

CSS :active Os pseudoclássicos são usados para escolher e definir os estilos dos elementos que o usuário está ativando.

:active Os seletores pseudoclássicos são mais usados para <a> e <button> elemento. Quando o usuário clicar no link, ele será ativado; o botão também é assim.

Dica:Usar :link Definir o estilo do link da página não visitada, usando :visited Definir o estilo do link da página visitada, usando :hover Definir o estilo do link ao passar o mouse.

Atenção:Nos definições CSS,:active Deve estar colocado :hoverapós (se existir) para funcionar!

Exemplo

Exemplo 1

Escolher e definir o estilo do link ativo:

a:active {
  background-color: yellow;
}

Experimente você mesmo

Exemplo 2

Escolher e definir o estilo do <button> ao clicar:

button:active {
  background-color: pink;
}

Experimente você mesmo

Exemplo 3

Escolher e definir os estilos dos elementos <p>, <h1> e <a> ao clicar:

p:active, h1:active, a:active {
  background-color: yellow;
}

Experimente você mesmo

Exemplo 4

Escolher e definir os estilos dos links não visitados, visitados, ao passar o mouse e ativos:

/* Link não visitado */
a:link {
  color: green;
}
/* Link visitado */
a:visited {
  color: green;
}
/* Link ao passar o mouse */
a:hover {
  color: red;
}
/* Link ativo */
a:active {
  color: yellow;
}

Experimente você mesmo

Exemplo 5

Definir estilos diferentes para os links:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Experimente você mesmo

Sintaxe CSS

:active {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente esse seletor.

Páginas relacionadas

Tutorial:Links CSS

Tutorial:Botões CSS

Tutorial:Seletores CSS