:focus-withinPseudo selektorius CSS yra šiek tiek neįprasta, tačiau gerai pavadintas ir gana intuityvus. Jis pasirenka elementą, jei jame yra vaikų, kurie turi :focus.
form:focus-within ( background: lightyellow; )Kuris veikia taip ...
Aš pasakiau „neįprasta“, nes CSS nėra įprasta pasirinkti tėvų elementą pagal vaiko elementų egzistavimą ar būseną. Aišku, nors tai naudinga!
Štai pavyzdys, kaip išbandyti:
Žiūrėkite paprastą reaguojamąją formą „Pen“ su: dėmesio centre Chris Coyier (@chriscoyier) „CodePen“.
Atkreipkite dėmesį, kad pavyzdys naudojamas :focus-withinvisai formai ir vidiniam įvesties įvyniojimui
Bet koks būdas, kuriuo vaiko elementas gali būti sutelktas, sukels: dėmesys viduje. Pvz., Jei elementas turi tab-indexarba contenteditableatributą, jis yra fokusuojamas elementas ir veiks. Taip pat nesvarbu, kaip elementas buvo sutelktas. Ją galima spustelėti ar paliesti, ją būtų galima pažymėti skirtuku ar naršyti kitomis priemonėmis ar net sutelkti naudojant „JavaScript“, pvz.,…
document.querySelector("input").focus();Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 60 | 52 | Ne | 79 | 10.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |