Pseudo-classe focus-within
La pseudo-classe focus-within définit le style
des éléments qui sont en focus.
Contrairement à la pseudo-classe focus qui définit
le style directement à l'élément lui-même, focus-within
définit le style pour l'élément parent.
Syntaxe
sélecteur:focus-within {
}
Exemple
Définissons une couleur de fond bleue pour l'élément parent, lorsque son élément enfant input est en focus :
<div>
Entrez votre nom : <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Voir aussi
-
la pseudo-classe
:indeterminate,
qui définit le style des interrupteurs qui sont dans un état indéterminé -
la pseudo-classe
:default,
qui définit le style des éléments par défaut -
la pseudo-classe
:fullscreen,
qui définit le style des éléments en mode plein écran -
la pseudo-classe
:placeholder-shown,
qui définit le style des éléments lors de l'affichage du texte d'indication -
la propriété
caret-color,
qui définit la couleur du curseur texte dans l'input
