Inicia sesión


Las diferencias entre :focus y :active

Las diferencias entre :focus y :activeLas 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 tutoriales en linea, 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.

Ver demostración...

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:

Ver demostración...

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 demo:

Ver demostración...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-03
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Crecimiento mundial en el mercado de software de diseño PCB para el 2020 - 2029

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-13
  • Categorias: Desarrolladores Lenguajes De Programacion Software Noticias Tutorial

Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial