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

/* Cible n'importe quel <div> lorsqu'un */
/* de ses descendants a reçu le focus */
div:focus-within {
  background: yellow;
}

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.

Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments <input>.

Syntaxe

:focus-within

Exemples

CSS

.name-container {
  padding: 4px;
}

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

input {
  margin: 4px;
}

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">
  <label for="prenom">
    Prénom :
    <input id="prenom" placeholder="Prénom" type="text">
  </label>
  <label for="nom">
    Nom :
    <input id="nom" placeholder="Nom" type="text">
  </label>
</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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 60Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Support complet 52IE Aucun support NonOpera Support complet 47Safari Support complet 10.1WebView Android Support complet 60Chrome Android Support complet 60Edge Mobile Aucun support Non
Notes
Aucun support Non
Notes
Notes This feature is not implemented. See the enhancement request.
Firefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 10.3Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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