Clase pseudo CSS :active
La clase pseudo :active se utiliza para seleccionar y dar estilo al enlace activo o a cualquier otro elemento. Es activada por el usuario.
Un elemento se vuelve activo cuando el usuario hace clic en el enlace o el elemento y presiona el botón del ratón.
La clase pseudo :active se utiliza en los elementos <a> y <button>. Esta clase pseudo también apunta a los elementos que contienen un elemento activado, y a los elementos de formulario que se activan a través del elemento <label>.
Las clases pseudo :link, :hover o :visited sobrescriben la definición especificada por la clase pseudo :active. Para dar estilo a los enlaces de manera adecuada, la regla :active debe colocarse después de todas las demás reglas relacionadas con los enlaces (:link, :visited, :hover, :active).
nota
No confundas
:activecon:focus. Mientras que:activese aplica mientras un elemento se está activando (por ejemplo, durante un clic del ratón),:focusse aplica cuando un elemento recibe el enfoque del teclado o programático.
INFO
En sistemas con ratones de múltiples botones, CSS3 especifica que el estado :active se activa mediante el botón de entrada principal (típicamente el botón izquierdo del ratón).
Versión
Sintaxis
Ejemplo de la clase pseudo CSS :active
:active {
css declarations;
}Ejemplo de la clase pseudo :active:
Ejemplo de código de la clase pseudo CSS :active
<!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>Ejemplo de la clase pseudo :active con la etiqueta <a>:
Clase pseudo CSS :active, ejemplo 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>En el siguiente ejemplo, haz clic en el texto para ver cómo cambia el color.
Ejemplo de la clase pseudo :active con la etiqueta <div>:
Clase pseudo CSS :active, otro ejemplo 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>Práctica
¿Cuál es el propósito del selector :active en CSS y dónde se puede usar?