Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Resumo

pseudo classe CSS :active coincide quando um elemento está sendo ativado pelo usuário. Ela permite que a página forneça um feedback de que a ativação foi detectada pelo navegador. Ao interagir com um mouse, normalmente é o tempo entre o usuário pressionar o botão do mouse e liberá-lo. A pseudo-classe :active também é normalmente correspondida quando se usa a tecla de tabulação do teclado. É freqüentemente usado em elementos HTML <a> e <button>, mas pode não estar limitado apenas à eles.

Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, :link, :hover e :visited, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra  :active depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. :link:visited:hover:active.

Nota: Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.

Exemplo

HTML

<body>
    <h1>:active CSS selector example</h1>
    <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
</body>

CSS

body { background-color: #ffffc9 }
a:link { color: blue } /* links não visitados */
a:visited { color: purple } /* links visitados */
a:hover { font-weight: bold } /* user hovers */
a:active { color: lime } /* links ativos */

Especificações

Especificação Status Comentário
Selectors Level 4
The definition of ':active' in that specification.
Rascunho atual
Nenhuma mudança.
Selectors Level 3
The definition of ':active' in that specification.
Recomendação
Nenhuma mudança.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recomendação
Nenhuma mudança.
CSS Level 1
The definition of ':active' in that specification.
Recomendação
Definição inicial.

Compatibilidade do navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support on the <a> element 1.0 1.0 (1.7 or earlier) 4.0 5.0 1.0
Support on any element 1.0 1.0 (1.7 or earlier) 8.0 7.0 ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support on the <a> element 1.0 1.0 (1.0) 6.0 6.0 1.0
Support on any element 1.0 1.0 (1.0) ? ? ? [1]

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: duduindo, Arlon, SKO
Última atualização por: duduindo,