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.