`:focus-within` - Sélecteur CSS

:focus-within

Résumé des caractéristiques du sélecteur `:focus-within`

Description rapide

Pseudo-classe ciblant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

Pseudo-classe `:focus-within` - Description

La pseudo-classe :focus-within est un sélecteur qui cible la zone de saisie active (celle qui a le focus) aussi bien que l'élément parent qui contient cette zone active. Le plus souvent l'élément parent est une balise form.

Deux autres pseudo-classes permettent de cibler uniquement l'élément qui a le focus (et pas son parent) : :focus et :focus-visible.

Pseudo-classe `:focus-within` - Exemples d'utilisation.

Contrôles dans un formulaire.

Cliquez sur une des zones de saisie ci-dessous (ou une case à cocher, un bouton, etc.) et observez que cette zone est alors entourée en rouge, ainsi que le formulaire qui la contient.

Autres conteneurs.

Les deux liens ci-dessous sont chacun dans une balise p, elles mêmes contenues dans une balise div. Quand on active un lien (avec la souris ou avec la touche de tabulation) la pseudo-classe :focus-within s'applique au lien ET au paragraphe.

Premier lien

Deuxième lien

Pseudo-classe `:focus-within` - Compatibilité des navigateur.

Cette pseudo-classe :focus-within est maintenant bien reconnue par les navigateurs. La syntaxe standard peut être doublée avec :-moz-focusring si on souhaite vraiment la compatibilité avec d'anciennes version de Firefox.

Colonne 1

Prise en charge par les navigateurs de la pseudo-classe :focus-within qui cible l'élément qui a le focus et son parent.

Pseudo-classe
:focus-within

Estimation de la prise en charge globale.

96%

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

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Pseudo-classe `:focus-within` - Historique.

Sélecteurs - Niveau 4

Concernant :focus-within. Introduction de la pseudo-classe :focus-within dans le niveau 4 de la spécification.

29 Septembre 2011
Document de travail.

Voir aussi...

Plusieurs sélecteurs par pseudo-classe permettent de désigner un élément en fonction des actions de l'utilisateur, comme le fait de toucher un élément (écran tactile) ou de déplacer le pointeur de la souris.

: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

Pseudo-classe ciblant la zone de saisie qui a le focus.

: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).