CSS :focus-within

Von: Felix, Jonas, Raimund

Mit der Pseudoklasse :focus-within können Elemente gestylt werden, deren Kind-Elemente fokussiert wurden.

Aktualisiert von 2021 – 2023

Die CSS Pseudoklasse :focus-within steht für Elemente, die fokussiert wurden – genauso wie :focus – und darüber hinaus für Elemente, deren Kind-Elemente fokussiert wurden. Wir haben praktische Anwendungsbeispiele für :focus-within zusammengestellt.

Eltern von fokussiertem Element hervorheben

Alle Anwendungsbeispiele sind in erster Line für die Tastatursteuerung relevant – wenn der User primär via Tabulator-Taste von einem fokussierbarem Element zum nächsten springt und so durch die Website navigiert.

In diesem Beispiel haben wir ein Card Element, das wir beim Fokussieren des darin liegenden Links visuell hervorheben. In diesem Fall bekommt das Card Element, das ein einfaches div ist und damit nicht fokussiert werden kann, einen Schlagschatten.

.card:focus-within {
    box-shadow: 0 0 20px rgba(0,0,0, .5);
    border-color: transparent;
}

Beispiel anschauen

Formular-Abschnitt hervorheben

Bei längeren Formularen kann es für User schwer sein, den Überblick zu behalten – man könnte sagen: den Fokus nicht zu verlieren. Mit :focus-within können wir einen inhaltlichen Sinnabschnitt eines Formulars optisch hervorheben, um die Bearbeitung übersichtlicher zu gestalten.

.form__section:focus-within {
    background-color: lightyellow;
}

Beispiel anschauen

Visuell verstecke Unterebene einblenden

Das Menü in diesem Beispiel ist eine verschachtelte Liste mit Listenpunkten in zwei Ebenen. Die zweite Ebene ist initial ausgeblendet. Wird ein Link innerhalb eines Listenpunkts der ersten Ebene fokussiert, wird die zweite Ebene eingeblendet. So können wir uns per Tab-Taste durch die gesamte Liste navigieren.

Um Irritation zu vermeiden, weisen wir an dieser Stelle darauf hin, dass wir in diesem Beispiel ein keinesfalls vollständiges und/oder barrierefreies Menü gebaut haben. Das Beispiel dient nur zur Veranschaulichung der Funktion.

<ul class="menu">
    <li class="menu__item">
        <a href="#" class="menu__link">Link 1</a>
        <ul class="menu__submenu">
            <li class="menu__item">
                <a href="#" class="menu__link">Link 1.1</a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">Link 1.2</a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">Link 1.3</a>
            </li>
        </ul>
    </li>
    ...
</ul>

.menu__submenu {
    visibility: hidden;
}

.menu__item:focus-within .menu__submenu {
    visibility: visible;
}

Beispiel anschauen

Die Fokusanzeige für Elemente ist ein unabdingbares Kriterium, um eine Website uneingeschränkt nutzen zu können, und deshalb auch Teil der Web Content Accessibility Guidelines (WCAG). Neben :focus und :focus-within existiert auch noch die Pseudoklasse :focus-visible, die wir hier genauer beschreiben.

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Geschrieben von:

Felix Lehmann

Als Web-Designer und Frontend-Developer bei kulturbanause umfasst Felix Hauptaufgabenbereich die Konzeption, Gestaltung und Umsetzung von Designsystemen. Scribble auf Papier, Prototyping im Design-Tool, schnellstmöglich in den Browser und mit CSS umsetzen. Auch das Überführen in ein Custom WordPress-Theme ist kein Problem. Die meiste Zeit verbringt er trotzdem damit die richtigen Klassennamen zu finden.

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.