Pseudo-classe CSS :focus-within
Baseline
Large disponibilité
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)).
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 la sélection sur l'un de ses éléments <input>.
Exemple interactif
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
<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>
Syntaxe
:focus-within {
/* ... */
}
Exemples
Dans cet exemple, le formulaire reçoit des styles de coloration spéciaux lorsque l'un des champs de saisie de texte est sélectionné.
HTML
<p>
L'élément div ci-après a un fond jaune si l'un des deux champs de saisie a la
sélection.
</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
| Spécification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:focus - La pseudo-classe
:focus-visible - Captez l'attention de vos utilisateur·ice·s grâce au sélecteur
focus-within(angl.)