:focus-within

La pseudo-classe :focus-within s'applique à tous les éléments pour lesquels la pseudo-classe :focus s'applique ainsi qu'à tous leurs éléments descendants , y compris ceux du Shadow DOM. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).

Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du Shadow DOM.

Cette pseudo-classe ne s'applique pas aux éléments parents de l'élément qui reçoit le focus, comme :checked et :enabled et non comme :active ou :hover.

Syntaxe

:focus-within { style properties }

Exemples

CSS

.premier:focus-within {
  color: red;
}

.second:focus-within {
  color: lime;
}

HTML

<input class="premier" value="Rouge avec le focus">
<input class="second" value="Vert citron avec le focus">

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':focus-within' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support[1] Pas de support[2] 52.0 (52.0)[3] Pas de support Pas de support Pas de support[4]
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support[1] 52.0 (52.0)[3] Pas de support Pas de support Pas de support

[1] Cette fonctionnalité n'est pas encore implémentée actuellement, cf. Chromium bug 617371.

[2] Cette fonctionnalité n'est pas encore implémentée. Voir la demande d'amélioration à ce sujet.

[3] Cette fonctionnalité a été implémentée avec le bug 1176997.

[4] Cette fonctionnalité est implémentée dans la version Technology Preview de Safari depuis la version 8.0.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,