CSS :active Pseudoclase
Usa la pseudoclase CSS :active para estilizar el enlace activo. Lee sobre la pseudoclase y prueba ejemplos.
La pseudoclase CSS :active selecciona y estiliza un elemento mientras está siendo activado por el usuario — generalmente el breve instante entre presionar el botón del ratón sobre un enlace o botón y soltarlo. Esta página explica cómo funciona :active, por qué importa el orden de las reglas de enlace, y muestra ejemplos ejecutables para enlaces, botones y otros elementos.
Un elemento se vuelve activo cuando el usuario presiona el botón principal del ratón sobre él (y permanece activo hasta que se suelta el botón). En pantallas táctiles, se aplica mientras el elemento está siendo tocado.
:active se usa más frecuentemente en los elementos <a> y <button>, pero puede apuntar a cualquier elemento. También coincide con un elemento que contiene un elemento activado, y con controles de formulario que se activan a través de su <label>.
Por qué importa el orden de las reglas
Las pseudoclases :link, :visited y :hover pueden sobrescribir los estilos establecidos por :active debido a cómo la cascada resuelve las reglas con igual especificidad — gana la última regla que coincide. Para que el estado activo sea visible, enumera las reglas relacionadas con enlaces en este orden exacto (recuérdalo como LVHA):
a:link { color: #1c87c9; } /* unvisited */
a:visited { color: #8e44ad; } /* already visited */
a:hover { color: #2980b9; } /* mouse over */
a:active { color: #8ebf42; } /* being clicked */Coloca :active después de :link, :visited y :hover, de lo contrario las reglas anteriores lo enmascararían.
No confundas :active con :focus. Mientras :active se aplica cuando un elemento está siendo activado (p. ej., durante un clic del ratón), :focus se aplica cuando un elemento recibe el foco mediante teclado o programáticamente.
En sistemas con ratones de varios botones, CSS3 especifica que el estado :active es activado por el botón de entrada principal (normalmente el botón izquierdo del ratón).
Versión
Sintaxis
Ejemplo de pseudoclase CSS :active
:active {
css declarations;
}Ejemplo de la pseudoclase :active:
Ejemplo de código de la pseudoclase 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 pseudoclase :active con la etiqueta <a>:
Pseudoclase 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 pseudoclase :active con la etiqueta <div>:
Pseudoclase 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>Ejemplo de :active en un <button>:
Combinar :active con :hover y :focus es una forma habitual de dar a los botones un conjunto completo de estados interactivos. La regla :active de abajo da al botón un aspecto de "presionado" mientras se mantiene presionado el botón del ratón.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #1c87c9;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #156a9e;
transform: translateY(2px);
}
</style>
</head>
<body>
<h2>:active on a button</h2>
<button>Press me</button>
</body>
</html>Cosas a tener en cuenta
:activevs:focus.:activedura solo mientras el elemento está siendo presionado;:focuspermanece mientras el elemento mantiene el foco por teclado o programáticamente. Usa:focus(o:focus-visible) para la accesibilidad de teclado — nunca dependas únicamente de:active, ya que es inalcanzable para usuarios que solo usan el teclado.- No elimines toda la retroalimentación visual. Estilizar
:active,:hovery:focusjuntos ayuda a los usuarios a entender que un elemento es interactivo. - La especificidad también importa. El orden de las reglas solo resuelve los empates entre selectores de igual especificidad. Un selector más específico en otro lugar puede ganar igualmente, así que mantén tus reglas de enlace en el mismo nivel de especificidad.