:focus-withinSelektor psevdo v CSS je malce nenavadno, čeprav je tudi imenovan, in precej intuitivno. Izbere element, če vsebuje element, ki ima podrejene elemente :focus.
form:focus-within ( background: lightyellow; )Kateri deluje tako ...
Rekel sem "nenavadno", ker v CSS ni običajno, da bi lahko izbrali nadrejeni element glede na obstoj ali stanje podrejenih elementov. Seveda je koristno!
Tu je primer obrazca, na katerem ga lahko preizkusite:
Oglejte si preprost odzivni obrazec Pen with: focus-Within Chris Coyier (@chriscoyier) na CodePen.
Upoštevajte, da je primer uporabljen :focus-withinna celotnem obrazcu in na notranjem ovijanju vnosa
Kakršen koli način, kako se lahko podrejeni element osredotoči, sproži: osredotočenost znotraj. Na primer, če ima element atribut tab-indexali ali contenteditable, je element, ki ga je mogoče osredotočiti, in bo deloval. Prav tako ni pomembno, kako se je element osredotočil. Lahko se ga klikne ali tapne, lahko se ga zavihek ali navigacija z drugimi sredstvi ali celo osredotoči prek JavaScripta, na primer ...
document.querySelector("input").focus();Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 60 | 52 | Ne | 79 | 10.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |