Pseudoclasse focus-within
La pseudoclasse focus-within definisce lo stile
agli elementi che sono in focus.
A differenza della pseudoclasse focus, che definisce
lo stile direttamente all'elemento stesso, focus-within
definisce lo stile per l'elemento genitore.
Sintassi
selettore:focus-within {
}
Esempio
Impostiamo il colore di sfondo dell'elemento genitore su blu chiaro, quando il suo elemento figlio input si trova in focus:
<div>
Inserisci il tuo nome: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Vedi anche
-
la pseudoclasse
:indeterminate,
che definisce lo stile agli interruttori che si trovano in uno stato indeterminato -
la pseudoclasse
:default,
che definisce lo stile agli elementi predefiniti -
la pseudoclasse
:fullscreen,
che definisce lo stile agli elementi in modalità a schermo intero -
la pseudoclasse
:placeholder-shown,
che definisce lo stile agli elementi quando viene visualizzato il testo del suggerimento -
la proprietà
caret-color,
che definisce il colore del cursore di testo nell'input
