Resumen
La pseudo-clase :active de CSS cubre el caso en el que un elemento está siendo activado por el usuario. Cuando se interactúa con el ratón, se corresponde al momento en el que el usuario presiona el botón del ratón hasta el momento en el que lo suelta. A menudo es usado en los elementos <a> y <button> de HTML.
Este estilo puede ser sustituido por otras peudo-clases asociadas a enlaces, como son :link, :hover, y :visited si aparecen en reglas posteriores. Para dar el estilo apropiado a los enlaces teniendo en cuenta el orden de precedencia, necesitarás poner la regla :active tras el resto de reglas asociadas a enlaces. El order está definido por la regla mnemotécnica LVHA: :link — :visited — :hover — :active.
Nota: en sistemas con ratones con más de un botón, CSS 3 especifica que la pseudo-clase
:active se aplica solamente al botón principal, típicamente el botón izquierdo del ratón para configuraciones por defecto y de personas diestras (puede ser cambiado en la configuración del sistema o desde la configuración de los drivers del propio ratón para mejorar la usabilidad de personas zurdas, en cuyo caso el botón principal pasaría a ser el derecho).Especificaciones
| Especificación | Estado | Comentarios |
|---|---|---|
| Selectors Level 4 | Working Draft | Sin cambios. |
| Selectors Level 3 | Recommendation | Sin cambios. |
| CSS Level 2 (Revision 1) | Recommendation | Sin cambios. |
| CSS Level 1 | Recommendation | Definición inicial. |
Compatibilidad con navegadores
| Caracterísitica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Soporte para el elemento <a> |
1.0 | 1.0 (1.7 or earlier) | 4.0 | 5.0 | 1.0 |
| Soporte para cualquier elemento | 1.0 | 1.0 (1.7 or earlier) | 8.0 | 7.0 |
| Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Soporte para el elemento <a> |
1.0 | 1.0 (1.0) | 6.0 | 6.0 | 1.0 |
| Soporte para cualquier elemento | 1.0 | 1.0 (1.0) | ? |
Prueba interactiva de :active
Contenido HTML
<body> <h1>Ejemplo del selector CSS :active</h1> <p>El enlace siguiente cambiará su color a lima mientras se mantenga pulsado: <a href="#">Mozilla Developer Network</a>.</p> </body>
Contenido CSS
body { background-color: #ffffc9 }
a:link { color: blue } /* enlaces no visitados */
a:visited { color: purple } /* enlaces visitados */
a:hover { font-weight: bold } /* el usuario pasa el cursor por encima */
a:active { color: lime } /* enlaces activos */