CSS - Pseudo-classe: focus

Descrizione

La pseudo-classe : focus viene utilizzata per aggiungere un effetto speciale a un elemento mentre l'elemento ha il focus.

Durante la definizione di pseudo-classi in un blocco <style> ... </style>, è necessario prestare attenzione ai seguenti punti:

  • a: hover DEVE venire dopo un: link e un: visitato nella definizione CSS per essere efficace.

  • a: active DEVE venire dopo a: hover nella definizione CSS per essere efficace.

  • I nomi delle pseudo classi non fanno distinzione tra maiuscole e minuscole.

  • Le pseudo-classi sono diverse dalle classi CSS ma possono essere combinate.

Possibili valori

  • color - Qualsiasi valore di colore valido.

Si applica a

Elemento di ancoraggio / collegamento.

Esempio

Di seguito è riportato l'esempio che dimostra come utilizzare : focus class per cambiare il colore dei collegamenti focalizzati.

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

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

Questo produrrà il seguente collegamento. Questo cambierà il colore in arancione quando questo collegamento viene messo a fuoco, quindi ti concentrerai su qualsiasi altro collegamento per vedere che questo colore cambierà quando perderà il fuoco.