Qual é a diferença entre: focus e: active?

Qual é a diferença entre as :focuse :activepseudo-classes?

:focuse :activesão dois estados diferentes.

• :focus representa o estado em que o elemento está atualmente selecionado para receber entrada e
• :active representa o estado em que o elemento está sendo ativado atualmente pelo usuário.

Por exemplo, digamos que temos um <button>. O <button>não terá nenhum estado para começar. Apenas existe. Se usamos Tabpara dar "foco" ao <button>, ele agora entra em seu :focusestado. Se você clicar (ou pressionar space), fará com que o botão entre no :activeestado ( ).

Na mesma nota, quando você clica em um elemento, você dá a ele se concentrar, o que também cultiva a ilusão de que :focuse :activesão os mesmos. Eles não são os mesmos. Quando clicado, o botão está no :focus:activeestado.

Um exemplo:

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

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

Fonte: Pseudo-classes CSS

Existem quatro casos.

1. Por padrão, ativo e foco estão desativados.
2. Quando você guia para percorrer os elementos focalizáveis , eles entram :focus(sem ativo).
3. Quando você clica em um elemento:active não focalizável , ele entra (sem foco).
4. Quando você clica em um elemento:active:focus focalizável, ele entra (ativo e focaliza simultaneamente).

Exemplo:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Quando a página carrega, ambos estão no caso 1. Quando você pressiona a tecla tab, você focaliza a segunda div e a vê exibir a caixa 2. Quando você clica na primeira div, você vê o caso 3. Quando você clica na segunda div, você vê o caso 4 .

Se um elemento é focável ou não é outra questão . A maioria não é por padrão. Mas, é seguro assumir <a>, <input>, <textarea>são focusable por padrão.

: focus é quando um elemento é capaz de aceitar entrada - o cursor em uma caixa de entrada ou em um link que foi tabulado.

: active é quando um elemento está sendo ativado por um usuário - o tempo entre o momento em que um usuário pressiona um botão do mouse e o libera.

Ativo é quando o usuário que está ativando esse ponto (como clicar no mouse, se usarmos a guia campo a campo, não há sinal do estilo ativo. Talvez o clique precise de mais tempo, tente manter o botão pressionado nesse ponto), o foco ocorre depois o ponto está ativado. Tente o seguinte:

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

O foco só pode ser dado pela entrada do teclado, mas um Elemento pode ser ativado por ambos, um mouse ou um teclado.

Se alguém usasse: foco em um link, a regra de estilo seria aplicada apenas pressionando um botão no teclado.

O uso do "foco" dará aos usuários do teclado o mesmo efeito que os usuários do mouse quando passam o mouse. "Ativo" é necessário para obter o mesmo efeito no Internet Explorer.

A realidade é que esses estados não funcionam como deveriam para todos os usuários. O não uso dos três seletores cria problemas de acessibilidade para muitos usuários que usam apenas o teclado e que são fisicamente incapazes de usar o mouse. Convido você a aceitar o desafio #nomouse (nomouse dot org).