Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Eltern von Elementen mit Fokus hervorheben

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.

Kommentare

Gunnar Bittersmann
am 10.01.2018 - 16:15

Ich hab mit :focus-within vor einiger Zeit mal ein Landetrupp zusammengestellt. Erklärung nebenan im SELFHTML-Forum.

Permanenter Link

Matthias Apsel
am 13.01.2018 - 14:34

"Eine damit versehene CSS-Regel kommt dann zum Einsatz, wenn ein Kindelement den Fokus erhält."

Eine damit versehene CSS-Regel kommt dann zum Einsatz, wenn es selbst oder ein Nachfahrenelement den Fokus erhält.

Damit ist also in gewisser Weise eine Rückwärts-Selektion möglich.
focus-within selektiert jedoch ein Element, sobald irgendeins seiner Nachfahrenelemente (oder es selbst) den Fokus erhält. Es ist nicht möglich, das Vorfahrenelement in Abhängigkeit von einem bestimmten Nachfahrenelement zu selektieren.

Siehe auch: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/focus-within

Permanenter Link

Neuen Kommentar hinzufügen

Bitte beachtet unsere Hausregeln fürs Kommentieren. Die Kommentare werden nach sechs Wochen geschlossen.