CSS: Selectores activos

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: Selectores activos

Este tutorial de CSS explica cómo usar los selectores de CSS llamados :positivo Con sintaxis y ejemplos.

describir

El selector CSS :active le permite apuntar a un elemento que se está activando (como un enlace en el que se hace clic).

sintaxis

La sintaxis para el selector :active CSS es:

element:active { style_properties }

parámetro o parámetro

elemento El elemento a posicionar cuando el usuario lo activa. style_properties Estilos CSS aplicados al elemento cuando el usuario lo activa.

notas

  • El selector :active es una pseudoclase que le permite apuntar a un elemento que se está activando.
  • A partir de IE4 y Opera 5, el selector activo solo se puede usar con Las etiquetas se usan juntas.

Compatibilidad del navegador

El selector CSS :active tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Navegador de Internet (IE)
  • ópera
  • Safari (WebKit)

ejemplo

Discutiremos el selector :active a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos a un elemento que se está activando.

con Etiqueta

Veamos un ejemplo de CSS :active donde aplicamos el selector :active a Etiqueta.

CSS se ve así:

a:active { background: lightgrey; }

HTML se ve así:

<div>
  <p>Here is a great site: <a href="https://www.checkyourmath.com/index.php">CheckYourMath.com</a></p>
</div>

Cuándo Cuando la pestaña no está activada, se ve así:

Luego, una vez que haga clic en el enlace, se configurará el selector activo El estilo del marcado (en muy poco tiempo) de la siguiente manera:

En este ejemplo activo, el enlace “CheckYourMath.com” solo se mostrará con un fondo gris claro cuando esté activado (es decir, cuando se haga clic en él). Este efecto solo durará un segundo más o menos.