: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 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 |
Compatibilité des navigateurs
Loading…