Pseudo-clase :active de CSS

Definición y uso

CSS :active Las pseudoclases se utilizan para seleccionar y establecer los estilos de los elementos que el usuario está activando.

:active Las pseudoclases se utilizan principalmente para <a> y <button> elementos. Cuando el usuario hace clic en un enlace, este se activa; ocurre lo mismo con los botones.

Consejo:Usar :link Establecer los estilos de los enlaces de la página no visitada, usando :visited Establecer los estilos de los enlaces de la página visitada, usando :hover Establecer los estilos de los enlaces al pasar el ratón.

Nota:En las definiciones CSS,:active Debe colocarse :hover¡Después de que (si existe) se aplicará!

Ejemplo

Ejemplo 1

Elegir y establecer los estilos del enlace activo:

a:active {
  background-color: amarillo;
}

Prueba tu mismo

Ejemplo 2

Elegir y establecer los estilos del botón al hacer clic:

button:active {
  background-color: rosa;
}

Prueba tu mismo

Ejemplo 3

Elegir y establecer los estilos de los elementos <p>, <h1> y <a> al hacer clic:

p:active, h1:active, a:active {
  background-color: amarillo;
}

Prueba tu mismo

Ejemplo 4

Elegir y establecer los estilos de los enlaces no visitados, visitados, sobre los que se pasa el ratón y activos:

/* Enlace no visitado */
a:link {
  color: verde;
}
/* Enlace visitado */
a:visited {
  color: verde;
}
/* Enlace sobre el que se pasa el ratón */
a:hover {
  color: rojo;
}
/* Enlace activo */
a:active {
  color: amarillo;
}

Prueba tu mismo

Ejemplo 5

Establecer diferentes estilos para los enlaces:

a.ex1:hover, a.ex1:active {
  color: rojo;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Prueba tu mismo

Sintaxis CSS

:active {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la pseudoclase.

Páginas relacionadas

Tutoriales:Enlaces CSS

Tutoriales:Botones CSS

Tutoriales:Pseudoclases CSS