CSS - Pseudo-classe: focus

La description

La pseudo-classe : focus est utilisée pour ajouter un effet spécial à un élément pendant que l'élément a le focus.

Lors de la définition de pseudo-classes dans un bloc <style> ... </style>, les points suivants doivent être pris en compte -

  • a: hover DOIT venir après a: link et a: viewed dans la définition CSS pour être efficace.

  • a: active DOIT venir après un: hover dans la définition CSS pour être efficace.

  • Les noms de pseudo-classes ne sont pas sensibles à la casse.

  • Les pseudo-classes sont différentes des classes CSS mais elles peuvent être combinées.

Valeurs possibles

  • color - Toute valeur de couleur valide.

S'applique à

Élément Anchor / Link.

Exemple

Voici l'exemple qui montre comment utiliser : classe focus pour changer la couleur des liens focalisés.

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

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

Cela produira le lien suivant. Cela changera sa couleur en orange lorsque ce lien sera focalisé, puis vous vous concentrerez sur n'importe quel autre lien pour voir que cette couleur changera lorsqu'il perdra le focus.