MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

: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

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

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

[1] Cette fonctionnalité a été implémentée avec 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.

Étiquettes et contributeurs liés au document

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