Las diferencias entre :focus y :active CSS

Las pseudo-clases CSS son identificadores que se añaden a los selectores para dirigir reglas de estilo solo a los elementos que se encuentren en un determinado estado, y así facilitamos que el usuario pueda distinguirlos de otros elementos similares pero en un estado diferente.

:focus y :active son dos de estas pseudo-clases que se utilizan para los estados «enfocado» y «activo». Con ellas podemos, por ejemplo, dar estilo específico a los enlaces activados por un clic o distinguir la caja de texto en la que se está escribiendo.

Como veremos en este artículo, cualquier elemento admite el estado activo, pero no todos los elementos pueden ser enfocados. Por ejemplo, los elementos <a>, <button>, <input> o <textarea> son enfocables, pero no un <div> (salvo algunos detalles que explicaremos).

:focus

Un elemento está en estado «enfocado» cuando es el elemento actualmente seleccionado y listo para recibir acciones.

Por ejemplo, si tenemos un elemento <button> en una página, en un primer momento el elemento no tiene ningún estado especial, simplemente existe. Ahora, si utilizamos el tabulador (Tab) podemos ir enfocando elemento a elemento hasta llegar a nuestro botón.

En ese momento, podemos dar un estilo específico para ese botón con el propósito de que se distinga del resto de elementos de la página no enfocados y que el usuario pueda saber cual es el elemento actualmente seleccionado y que será objeto de sus acciones.

button {
    background-color: blue;
    color: white;
    border-radius: 50px;
}

/* Sombreado cuando el botón esté seleccionado/enfocado */
button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 4px blue;
}

:active

Si el estado :focus permite diferenciar el elemento que está preparado para recibir acciones, el estado :active se da cuando el elemento recibe alguna acción concreta.

Si seguimos con el ejemplo anterior, utilizamos el tabulador hasta que el botón queda seleccionado. En este momento, si hacemos click sobre el botón o pulsamos la tecla espaciadora (space) o la tecla enter (Enter), el botón entrará en estado activo: la acción del usuario se ha realizado sobre el elemento.

/* Background y sombra más oscuro en estado activo */
button:active {
    background-color: DarkBlue;
    box-shadow: 0 0 0 2px white, 0 0 0 4px DarkBlue;
}

El estado :active suele durar muy poco tiempo, solo el momento de la acción, por ejemplo lo que dure el clic (si mantienes el botón del ratón pulsado, seguirá el estado activo hasta que sueltes). El estado :focus, por el contrario, tiene una duración indefinida. Mientras no se seleccione otro elemento, el elemento permanecerá enfocado.

Elementos que admiten :focus y :active

Existen otras muchas pseudo-clases de estado, por ejemplo :hover, :disabled, :empty o :checked, aunque hay que tener en cuenta que no todos los elementos admiten los mismos estados y, por tanto, no todas estas pseudo-clases se pueden aplicar a todos los elementos.

En el caso de las pseudo-clases que nos ocupa este artículo, :focus y :active, hay diferencias muy notables.

La primera es que cualquier elemento admite el estado activo, incluso al elemento raíz (<html>) como podemos ver en el siguiente demo:

Por el contrario, el estado focus se da solo en estos elementos y estas situaciones:

  • <a> con atributo href
  • <link> con atributo href
  • <button>, <select> y <textarea>
  • <input>, excepto si el atributo type es igual a hidden
  • <iframe> y otros contenedores de contextos de navegación
  • Secciones editables definidos con el HTML Editing API
  • Elementos arrastrables o con interfaz de clasificación u ordenación implementada (por ejemplo, con atributo draggable)
  • Cualquier otro elemento con tabindex superior o igual a cero

Por otro lado, hay que tener en cuenta que ningún elemento en estado desactivado (atributo disabled) es enfocable, ni seleccionable, ni activable, por tanto, no podrán ser objeto de las pseudo-clases :focus ni :active, pero si de la pseudo-clase :disabled, como puedes comprobar en el siguiente pen:

Referencias

  1. User interaction: Focusable area. Web Hypertext Application Technology Working Group (WHATWG)