Saltar al contenido

¿Cuál es la diferencia entre :focus y :active?

Pudiera darse el caso de que encuentres algún fallo en tu código o trabajo, recuerda probar siempre en un entorno de testing antes subir el código al trabajo final.

Solución:

:focus y :active son dos estados diferentes.

  • :focus representa el estado cuando el elemento está actualmente seleccionado para recibir entrada y
  • :active representa el estado cuando el elemento está siendo activado actualmente por el usuario.

Por ejemplo, digamos que tenemos un

editar: jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Fuente: CSS Pseudo-clases

Hay cuatro casos.

  1. De forma predeterminada, activo y foco están desactivados.
  2. Cuando usted pestaña recorrer elementos enfocablesentrarán :focus (sin activo).
  3. Cuando usted hacer clic en un elemento no enfocableentra :active (sin foco).
  4. Cuando usted hacer clic en un elemento enfocable entra :active:focus (activar y enfocar simultáneamente).

Ejemplo:


  I cannot be focused.





  I am focusable.



div:focus 
  background: green;


div:active 
  color: orange;


div:focus:active 
  font-weight: bold;

Cuando se carga la página, ambos están en el caso 1. Cuando presiona tabulador, enfocará el segundo div y lo verá exhibir el caso 2. Cuando haga clic en el primer div, verá el caso 3. Cuando haga clic en el segundo div, verá el caso 4 .

Si un elemento es enfocable o no es otra cuestión. La mayoría no lo son por defecto. Pero, es seguro asumir , ,