:focus - Sélecteur CSS

Description de la pseudo-classe :focus.

La pseudo-classe :focus désigne l'élément qui a le focus, c'est à dire celui qui reçoit les entrées au clavier.
Remarque : le focus ne se transmet pas aux parents. Par exemple le formulaire qui contient la zone ayant le focus ne sera pas lui-même ciblé par la pseudo-classe :focus.

:focus peut être concurrencée par plusieurs autres pseudo-classes avec des priorités identiques. On sait que, lorsque les priorités sont les mêmes, c'est la dernière règle rencontrée qui écrase les autres. Le cas le plus complexe est celui des liens pour lesquels de nombreuses autres pseudo-classes peuvent interférer (:link, :visited, etc). Reportez-vous à la page :active pour une indication sur l'ordre à respecter pour les règles qui peuvent entrer en concurrence.

Deux autres pseudo-classes sont relatives aux interactions avec l'utilisateur :

• :active désigne l'élément cliqué ou touché, pendant le temps où le bouton est enfoncé ou le doigt posé.
• :hover désigne l'élément sur lequel la souris est positionnée, même si le bouton n'est pas enfoncé.

Exemples d'utilisation de :focus.

L'exemple ci-dessous présente un lien et différentes zones de saisie (texte, cases à cocher, boutons). En activant l'un ou l'autre de ces éléments avec la souris ou avec la touche tabulation, vous verrez l'effet de la pseudo-classe :focus (ici l'ajout d'une bordure rouge).

Compatibilité des navigateurs.

1

Pseudo-classe
:focus

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe :focus.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Première présentation de la pseudo-classe :focus dans la version 2.xx de CSS.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Sélecteurs - Niveau 3

  Pas de changement concernant la pseudo-classe :focus.
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Pas de changement dans la spécification de la pseudo-classe :focus.
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

Les pseudo-classes qui permettent de désigner un élément en fonction des actions de l'utilisateur sont listées ci-dessous.

:active
Pseudo classe ciblant l'élément qui est actif (celui qui est cliqué ou touché).
:hover
Pseudo-classe ciblant l'élément sur lequel se trouve le curseur de la souris.
:focus-visible
Pseudo-classe ciblant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).
:focus-within
Pseudo-classe ciblant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.