:focus-withinPseido selektors CSS ir mazliet neparasts, lai gan labi nosaukumu un diezgan intuitīvi. Tas izvēlas elementu, ja tajā ir bērni, kuriem ir :focus.
form:focus-within ( background: lightyellow; )Kas darbojas šādi ...
Es teicu “neparasts”, jo CSS nav izplatīta iespēja izvēlēties vecāku elementu, pamatojoties uz bērnu elementu esamību vai stāvokli. Protams, tas tomēr ir noderīgi!
Šeit ir veidlapas piemērs, lai to izmēģinātu:
Skatiet Krāsa Koijera (@chriscoyier) uzmanības centrā esošo pildspalvveida pilnšļirces veidlapu CodePen
Ņemiet vērā, ka piemērs tiek :focus-withinizmantots visā veidlapā un iekšējā ievades iesaiņošanā
Jebkurš veids, kā bērna elements var kļūt fokusēts, izraisīs: uzmanības centrā. Piemēram, ja elementam ir tab-indexvai contenteditableatribūts, tad tas ir fokusējams elements un tas darbosies. Nav arī svarīgi, kā elements kļuva fokusēts. To varēja noklikšķināt vai pieskarties, to varēja atzīmēt ar cilni vai pārvietoties ar to kādā citā veidā vai pat koncentrēties, izmantojot JavaScript, piemēram,…
document.querySelector("input").focus();Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 60 | 52 | Nē | 79 | 10.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.3 |