Acho que você está misturando as pseudo-classes :active
com :focus
. A primeira ocorre quando você clica e segura o clique sobre o elemento; a segunda é quando recebe o focus — são comportamentos distintos.
Neste caso você deveria usar:
div:focus {
display: block;
}
Mas isso também não funcionaria porque não é possível dar focus a um elemento oculto.
Geralmente os que podem receber focus são elementos de formulários (inputs, selects etc.); div
s podem receber se tiverem o atributo tabindex
, como mostra o exemplo abaixo:
document.querySelector("div").focus();
div {
opacity: .2;
}
div:focus {
opacity: 1;
}
Clique fora do texto para tirar o focus da div:
<br>
<div tabindex="1">texto</div>
Concluindo, seu intento não é possível de realizar, principalmente com elementos ocultos.
Edit a pedido do autor
Como não se pode dar focus ao elemento oculto, pode colocar opacity: 0
e position: absolute
. Assim o elemento ficará transparente e não irá ocupar espaço no layout:
document.querySelector("div").focus();
div {
opacity: 0;
position: absolute;
}
div:focus {
opacity: 1;
position: static;
}
Clique fora do texto para tirar o focus:
<br>
<div tabindex="1">texto</div> Texto texto