Den :focus-withinpseudo vælgeren i CSS er lidt usædvanligt, selvom godt navngivet og temmelig intuitiv. Det vælger et element, hvis elementet indeholder børn, der har :focus.
form:focus-within ( background: lightyellow; )Hvilket fungerer sådan ...
Jeg sagde "usædvanligt", fordi det ikke er almindeligt i CSS at være i stand til at vælge et overordnet element baseret på eksistensen eller tilstanden af underordnede elementer. Sikker på er dog nyttigt!
Her er et eksempel på en formular, hvor du kan prøve det:
Se Pen Simple Responsive Form med: focus-inside af Chris Coyier (@chriscoyier) på CodePen.
Bemærk, at eksemplet bruges :focus-withini hele formularen og på indvendig indpakning af input
Enhver måde, som et barnelement kan blive fokuseret på, udløser: fokus indeni. For eksempel, hvis et element har en tab-indexeller contenteditableattribut, er det et element, der kan fokuseres, og fungerer. Det betyder heller ikke noget, hvordan elementet blev fokuseret. Det kunne klikkes på eller tappes på, det kunne have været fanebladet til eller navigeret til på anden måde eller endda fokuseret gennem JavaScript, som ...
document.querySelector("input").focus();Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 52 | Ingen | 79 | 10.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |