: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…