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

cssselettore:focus-within {

}

Esempio

Impostiamo il colore di sfondo dell'elemento genitore su blu chiaro, quando il suo elemento figlio input si trova in focus:

html<div>
  Inserisci il tuo nome: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

Vedi anche