MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

/* Cible n'importe quel <div> lorsqu'un */
/* de ses descendant 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.

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,