Qual é a diferença entre as :focus
e :active
pseudo-classes?
Qual é a diferença entre as :focus
e :active
pseudo-classes?
Respostas:
:focus
e :active
sã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 :focus
estado. Se você clicar (ou pressionar space), fará com que o botão entre no :active
estado ( ).
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 :focus
e :active
são os mesmos. Eles não são os mesmos. Quando clicado, o botão está no :focus:active
estado.
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
estado
focus
e active
não importa. Só importa quando eles se contradizem, por exemplo, color:red
e color:blue
(depois o último vence).
: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
visited
links não mudarão de estilo quando pairados ou clicados, porque sua "visitação" substituirá as outras pseudo-classes. LVHFA é a ordem que a maioria das pessoas deseja usar na maioria dos casos. Não sei por que você incluiu lang
...
Existem quatro casos.
:focus
(sem ativo).:active
não focalizável , ele entra (sem foco).: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.
:active
mas não o são :focus
. Essa é uma coisa em que fiquei confuso sobre o fato de as outras respostas não abordarem.
: 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.
:focus
não funciona assim. A área de texto em que estou digitando atualmente tem foco porque cliquei em um botão. Ele também pode perder e restaurar o foco clicando nele e novamente nele. Em apenas um segundo, focarei o botão Adicionar comentário à direita clicando nele. Tudo isso sem a entrada do teclado causando foco.
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).
document.activeElement
propriedade denominada de maneira confusa , embora precise estar em uma captura de tentativa, porque o IE8 pode gerar uma exceção. E esteja ciente de que as versões mais antigas dos navegadores podem tratar: ativo e: foco diferente.function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }