: zameranie-vnútri - Triky CSS

:focus-withinVolič pseudo v CSS je to trochu nezvyčajné, aj keď dobre menovaný a pomerne intuitívne. Vyberie prvok, ak obsahuje všetky podradené prvky :focus.

form:focus-within ( background: lightyellow; )

Čo funguje takto ...

Povedal som „neobvyklý“, pretože v CSS nie je bežné, aby bolo možné vybrať nadradený prvok na základe existencie alebo stavu podradených prvkov. Iste je to užitočné!

Tu je príklad na vyskúšanie:

Pozrite si formulár jednoduchej odpovede pera s: zameraním Chrisa Coyiera (@chriscoyier) na CodePen.

Upozorňujeme, že príklad sa používa :focus-withinna celý formulár a na vnútorné zalamovanie vstupov

Spustí sa akýkoľvek spôsob, ktorým sa dá zamerať detský prvok: zameranie-dovnútra. Ak má napríklad prvok tab-indexalebo alebo contenteditableatribút, je to zaostrovateľný prvok a bude fungovať. Tiež nezáleží na tom, ako sa prvok zameral. Dalo by sa na ňu kliknúť alebo na ňu klepnúť, mohlo to byť na karte alebo k nej navigovať nejakým iným spôsobom, alebo dokonca zamerať ju pomocou JavaScriptu, napríklad ...

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

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.