: Fokus innerhalb - CSS-Tricks

Der :focus-withinPseudo-Selektor in CSS ist etwas ungewöhnlich, obwohl er gut benannt und ziemlich intuitiv ist. Es wählt ein Element aus, wenn dieses Element untergeordnete Elemente enthält :focus.

form:focus-within ( background: lightyellow; )

Welches funktioniert so ...

Ich sagte "ungewöhnlich", weil es in CSS nicht üblich ist, ein übergeordnetes Element basierend auf der Existenz oder dem Status von untergeordneten Elementen auswählen zu können. Sicher ist aber nützlich!

Hier ist ein Beispielformular zum Anprobieren:

Siehe das einfache Antwortformular für den Stift mit: focus-inside von Chris Coyier (@chriscoyier) auf CodePen.

Beachten Sie, dass das Beispiel :focus-withinfür das gesamte Formular und für die innere Eingabe verwendet wird

Jede Art und Weise, wie ein untergeordnetes Element fokussiert werden kann, löst Folgendes aus: Fokus innerhalb. Wenn ein Element beispielsweise ein Attribut tab-indexoder contenteditablehat, ist es ein fokussierbares Element und funktioniert. Es spielt auch keine Rolle, wie das Element fokussiert wurde. Es könnte angeklickt oder getippt werden, es könnte auf andere Weise mit Registerkarten versehen oder navigiert worden sein oder sogar durch JavaScript fokussiert worden sein, wie…

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

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.