:focus-withinPseudo valijat CSS on natuke ebatavaline, kuigi hästi nimega ja pigem intuitiivne. See valib elemendi, kui see element sisaldab lapsi, kellel on :focus.
form:focus-within ( background: lightyellow; )Mis töötab niimoodi ...
Ma ütlesin „ebatavaline”, kuna CSS-is pole tavaline, et vanemelementi saab valida lapse elementide olemasolu või oleku põhjal. Muidugi on see siiski kasulik!
Siin on näidisvorm selle proovimiseks:
Vaadake Code Ceni pliiatsi lihtsat reageerivat vormi koos: keskendumisega Chris Coyier (@chriscoyier).
Pange tähele, et näide kasutab :focus-withinkogu vormi ja sisendi pakkimist
Kõik viis, kuidas lapselement saab keskenduda, käivitab: fookusesisene. Näiteks kui elemendil on tab-indexvõi contenteditableatribuut, siis on see fokuseeritav element ja see töötab. Samuti pole oluline, kuidas element keskendus. Sellel sai klõpsata või puudutada, seda oleks võinud sakkida või navigeerida mõnel muul viisil või isegi JavaScripti kaudu keskenduda, näiteks…
document.querySelector("input").focus();Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 52 | Ei | 79 | 10.1 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |