CSS - Pseudo-classe: foco

Descrição

A pseudo classe : focus é usada para adicionar um efeito especial a um elemento enquanto o elemento tem foco.

Ao definir pseudo-classes em um bloco <style> ... </style>, os seguintes pontos devem ser tomados cuidado -

a: hover DEVE vir depois de um: link e a: visitado na definição de CSS para ser eficaz.
a: active DEVE vir após a: hover na definição de CSS para ser eficaz.
Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas.
As pseudoclasses são diferentes das classes CSS, mas podem ser combinadas.

Valores possíveis

color - Qualquer valor de cor válido.

Aplica-se a

Elemento âncora / link.

Exemplo

A seguir está o exemplo que demonstra como usar : a classe focus para alterar a cor dos links focados.

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "/html/index.htm">Click this Link</a>
   </body>
</html>

Isso produzirá o seguinte link. Isso mudará sua cor para laranja quando este link for focalizado, então você focaliza em qualquer outro link para ver que esta cor mudará quando ele perder o foco.

↰ Previous page