Výběr :focus-withinpseudo v CSS je trochu neobvyklý, i když dobře pojmenovaný a spíše intuitivní. Vybírá prvek, pokud obsahuje všechny podřízené prvky, které mají :focus.
form:focus-within ( background: lightyellow; )Což funguje takto ...
Řekl jsem „neobvyklý“, protože v CSS není běžné, že je možné vybrat nadřazený prvek na základě existence nebo stavu podřízených prvků. Jistě je to užitečné!
Tady je ukázkový formulář, který si můžete vyzkoušet:
Podívejte se na jednoduchý formulář s perem s: focus-inside Chris Coyier (@chriscoyier) na CodePen.
Všimněte si, že příklad používá :focus-withinna celém formuláři a na vnitřním zalamování vstupu
Aktivuje se jakýkoli způsob, kterým se může podřízený prvek zaostřit: focus-inside. Pokud má například prvek tab-indexnebo contenteditableatribut, je to zaostřitelný prvek a bude fungovat. Také nezáleží na tom, jak se prvek stal soustředěným. Dalo by se na něj kliknout nebo na něj klepnout, bylo možné na něj kliknout nebo na něj navigovat nějakým jiným způsobem, nebo dokonce zaostřit pomocí JavaScriptu, jako ...
document.querySelector("input").focus();Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 60 | 52 | Ne | 79 | 10.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |