:focus-withinSelektor pseudo u CSS je malo neobično, iako dobro imenovan i vrlo intuitivno. Odabire element ako taj element sadrži bilo koje podređeno dijete koje ima :focus.
form:focus-within ( background: lightyellow; )Koji djeluje ovako ...
Rekao sam "neobično", jer u CSS-u nije uobičajeno biti u mogućnosti odabrati roditeljski element na temelju postojanja ili stanja podređenih elemenata. Svakako je korisno!
Evo primjera obrasca za isprobavanje:
Pogledajte jednostavni obrazac olovke Pen with: focus-Within, Chris Coyier (@chriscoyier) na CodePenu.
Imajte na umu da se primjer koristi :focus-withinna cijelom obliku i na unutarnjem umotavanju unosa
Bilo koji način na koji se podređeni element može usredotočiti pokrenut će: fokus unutar. Na primjer, ako element ima atribut tab-indexili ili contenteditableatribut, on je element koji se može fokusirati i radit će. Također nije važno kako je element postao fokusiran. Na nju se moglo kliknuti ili prisluškivati, na nju se moglo doći karticama ili kretati nekim drugim načinom, ili čak usmjeriti kroz JavaScript, poput ...
document.querySelector("input").focus();Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 60 | 52 | Ne | 79 | 10.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |