De :focus-withinpseudo-selector in CSS is een beetje ongebruikelijk, hoewel goed genoemd en nogal intuïtief. Het selecteert een element als dat element kinderen bevat die :focus.
form:focus-within ( background: lightyellow; )Dat werkt als volgt ...
Ik zei "ongebruikelijk" omdat het in CSS niet gebruikelijk is om een bovenliggend element te kunnen selecteren op basis van het bestaan of de staat van onderliggende elementen. Maar het is zeker handig!
Hier is een voorbeeldformulier om het uit te proberen:
Zie de Pen Simple Responsive Form met: focus-binnen door Chris Coyier (@chriscoyier) op CodePen.
Merk op dat het voorbeeld wordt gebruikt :focus-withinop het hele formulier en op invoerverpakking binnenin
Elke manier waarop een kind-element gefocust kan worden, triggert: focus-binnen. Als een element bijvoorbeeld een tab-indexof contenteditableattribuut heeft, dan is het een focusbaar element en zal het werken. Het maakt ook niet uit hoe het element werd gefocust. Er kan op worden geklikt of getikt, er kan op een andere manier naartoe zijn gegaan met tabbladen of er kan naar worden genavigeerd, of zelfs gefocust via JavaScript, zoals ...
document.querySelector("input").focus();Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 60 | 52 | Nee | 79 | 10.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |