: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

.name-container:focus-within {
  background: yellow;
}

input { margin: 3px }

HTML

<p> 
  L'élément div ci-après aura un fond jaune
  si l'un des deux champs de saisie a le focus.
</p>
<div class="name-container">
  <input placeholder="Prénom" type="text">
  <input placeholder="Nom" type="text">
</div>

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,