:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

css
/* 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

Error: could not find syntax for this item

Exemples

CSS

css
.name-container {
  padding: 4px;
}

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

input {
  margin: 4px;
}

HTML

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

Specification
Selectors Level 4
# the-focus-within-pseudo

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:focus-within

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi