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

Resumo

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.

This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules. In order to style appropriately links, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link:visited:hover:active.

Note: On systems with multi-button mice, CSS 3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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: SKO
Última atualização por: SKO,