:focus-within - Sélecteur CSS

Description de la pseudo-classe :focus-within.

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.

Exemple d'utilisation de :focus-within.

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.

Compatibilité des navigateurs.

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.

1

Pseudo-classe
:focus-within

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Edge

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

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