¿Cuál es la diferencia entre :focus y :active?
¿ Cuál es la diferencia entre las pseudoclases :focusy las ?:active
Aceptado
:focusy :activeson dos estados diferentes.
:focusrepresenta el estado en el que el elemento está actualmente seleccionado para recibir entrada y:activerepresenta el estado en el que el usuario está activando el elemento.
Por ejemplo, digamos que tenemos un <button>. <button>Para empezar, no tendrán ningún estado . Simplemente existe. Si solíamos Tabdarle "foco" al <button>, ahora entra en su :focusestado. Si luego hace clic (o presiona space), hará que el botón entre en su :activeestado ( ).
En ese sentido, cuando haces clic en un elemento, le das foco, lo que también cultiva la ilusión de que :focusy :activeson lo mismo. Ellos no son los mismos. Cuando se hace clic, el botón está en :focus:activeestado.
Un ejemplo:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>Expandir fragmento
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: Pseudoclases CSS
