:focus-within
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La pseudo-classe CSS :focus-within correspond à un élément si celui-ci ou l'un de ses descendants est sélectionné. En d'autres termes, elle représente un élément qui est lui-même correspondant à la pseudo-classe :focus ou qui a un descendant correspondant à :focus. (Cela inclut les descendants dans le DOM sombre (shadow DOM)).
Exemple interactif
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
<form>
<p>Quelle saveur souhaitez-vous commander ?</p>
<label>Nom complet : <input name="firstName" type="text" /></label>
<label
>Saveur :
<select name="flavor">
<option>Cerise</option>
<option>Thé vert</option>
<option>Vanille et beurre salé</option>
<option>Pépites de menthe</option>
</select>
</label>
</form>
Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire <form> lorsque l'utilisateur·ice passe le focus sur l'un de ses éléments <input>.
Syntaxe
:focus-within {
/* ... */
}
Exemples
Dans cet exemple, le formulaire recevra des styles de coloration spéciaux lorsque l'un des champs de saisie de texte sera sélectionné.
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>
<form>
<label for="prenom">Prénom :</label>
<input id="prenom" type="text" />
<br />
<label for="nom">Nom :</label>
<input id="nom" type="text" />
</form>
CSS
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ffff88;
color: black;
}
input {
margin: 4px;
}
Résultat
Spécifications
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |