: focus-within - CSS-Tricks | Almanah CSS 2025

:focus-withinSelectorul pseudo în CSS este un pic neobișnuită, deși bine-numit și destul de intuitiv. Selectează un element dacă acel element conține copii care au :focus.

form:focus-within ( background: lightyellow; )

Care funcționează așa ...

Am spus „neobișnuit” deoarece nu este obișnuit în CSS să poți selecta un element părinte pe baza existenței sau stării elementelor copil. Sigur este totuși util!

Iată un exemplu de formular pentru a-l încerca:

Vedeți Formularul de răspuns simplu Pen cu: focus-within de Chris Coyier (@chriscoyier) pe CodePen.

Rețineți că exemplul se folosește :focus-withinpe întregul formular și pe ambalajele de intrare interioare

Orice modalitate prin care un element copil poate deveni focalizat va declanșa: focus-inside. De exemplu, dacă un element are un atribut tab-indexsau contenteditable, atunci acesta este un element care poate fi focalizat și va funcționa. De asemenea, nu contează modul în care elementul a devenit concentrat. Ar putea fi apăsat sau atins, ar fi putut fi tabulat sau navigat prin alte mijloace sau chiar focalizat prin JavaScript, cum ar fi ...

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

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.