: focus-inside - Trucchi CSS | CSS Almanac 2025

Lo :focus-withinpseudo selettore in CSS è un po 'insolito, sebbene ben denominato e piuttosto intuitivo. Seleziona un elemento se quell'elemento contiene eventuali figli che hanno :focus.

form:focus-within ( background: lightyellow; )

Che funziona così ...

Ho detto "insolito" perché non è comune nei CSS essere in grado di selezionare un elemento genitore in base all'esistenza o allo stato degli elementi figli. Sicuramente è utile però!

Ecco un modulo di esempio per provarlo:

Vedere il Pen Simple Responsive Form con: focus-within di Chris Coyier (@chriscoyier) su CodePen.

Si noti che l'esempio utilizza :focus-withinsull'intero modulo e sull'input-wrapping interno

Qualsiasi modo in cui un elemento figlio può diventare focalizzato attiverà: focus-inside. Ad esempio, se un elemento ha un attributo tab-indexor contenteditable, allora è un elemento attivabile e funzionerà. Inoltre, non importa come l'elemento si sia concentrato. Potrebbe essere cliccato o toccato, potrebbe essere stato tabulato o spostato con altri mezzi, o anche focalizzato tramite JavaScript, come ...

document.querySelector("input").focus();

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.