0pseudo-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 ite 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).
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 pueda saber cual es el elemento actualmente seleccionado y que será objeto de sus acciones.: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 se ha realizado sobre el elemento.
Ver demostración...
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 iten 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 ite 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:
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...
Como veremos en este tutoriales en linea, cualquier elemento ite 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 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 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;
}Ver demostración...
Elementos que iten :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 iten 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 ite 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...
Comentarios