Webkrauts

Die Pseudoklasse :focus-within

Eltern von Elementen mit Fokus hervorheben

Pseudoklassen helfen, Zustände von Elementen gesondert zu gestalten. Ein Vertreter dieser Gattung ist :focus-within, der – sinnvoll eingesetzt – Formulare auf Webseiten benutzerfreundlicher machen kann.

CSS-Pseudoklassen sind nützlich, um Zustände abzufragen und den Benutzer durch gestalterische Elemente zu unterstützen. Am bekanntesten und häufigsten eingesetzt dürften Pseudoklassen in Verbindung mit Links sein. Dazu gehören beispielsweise :hover und :visited. Auch für Formularelemente kennen die meisten Webworker einige entsprechende Tricks. So lässt sich via :checked eine Checkbox gestalten, die angehakt ist, und mit :focus ein Element hervorheben, das gerade den Fokus hat.

Weniger bekannt ist jedoch die Pseudoklasse :focus-within. Der Name deutet die Funktionalität bereits an. Eine damit versehene CSS-Regel kommt dann zum Einsatz, wenn ein Kindelement den Fokus erhält. Ein sinnvoller Einsatz sind HTML-Formulare, bei denen sich beispielsweise die Hintergrundfarbe eines Fieldsets verändern lässt, sobald ein darin befindliches Eingabefeld den Fokus erhält.

Das funktioniert auch über mehrere Ebenen hinweg. Webworker können dadurch den gesamten body oder andere umfassende Elternelemente gestalten. Im folgenden Beispiel ist ein Wrapper mit :focus-within ausgestattet, worüber der Text oberhalb des Formulars in seiner Sichtbarkeit reduziert wird, sobald ein Benutzer in ein Eingabefeld klickt. Gleichzeitig verändern sich die Hintergrundfarben des Formularelements und des jeweils umschließenden fieldsets.

See the Pen :focus-within by Sascha (@saschapi) on CodePen.

Mit wenigen Ausnahmen ist :focus-within in modernen Desktop- und Smartphonebrowsern gut verfügbar. Der Internet Explorer und Edge bieten keine Unterstützung und auch Opera Mini spielt leider nicht mit. Da es aber kaum stört, wenn diese Verbesserung für bestimmte Benutzer nicht verfügbar ist, spricht nichts dagegen, :focus-within produktiv einzusetzen und so die Nutzereingabe in Formularen durch weitere gestalterische Mittel zu unterstützen.

Wie auch in anderen Fällen sollten Webworker die Pseudoklasse :focus-within natürlich nur gezielt da einsetzen, wo es sinnvoll ist und nicht eine reine Spielerei darstellt. Es finden sich jedoch sicherlich viele gute Einsatzmöglichkeiten.