: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 la pseudo-classe :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 navigateur avec :focus.

1

Pseudo-classe
:focus

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

KaiOS Browser

Androïd Brower

Chrome pour Androïd

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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant :focus. 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

  Concernant :focus. 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

  Concernant :focus. 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.