:focus-within

Der :focus-within Pseudo-Selektor in CSS ist etwas ungewöhnlich, aber gut benannt und recht intuitiv. Er wählt ein Element aus, wenn dieses Element Kinder enthält, die :focus haben.

form:focus-within {
  background: lightyellow;
}

Was funktioniert so…

<!-- this form will be selected -->
<form action="#">

  <!-- when this input is in focus -->
  <input type="text">

</form>

Ich sagte „ungewöhnlich“, weil es in CSS nicht üblich ist, ein Elternelement basierend auf der Existenz oder dem Zustand von Kindelementen auswählen zu können. Ist aber sehr nützlich!

Hier ist ein Beispielformular, das Sie ausprobieren können

Beachten Sie, dass das Beispiel :focus-within auf das gesamte Formular *und* auf innere, von <div> umschlossene Eingabeelemente anwendet.

Jede Möglichkeit, wie ein Kindelement fokussiert werden kann, löst :focus-within aus. Wenn ein Element zum Beispiel ein tab-index oder ein contenteditable Attribut hat, dann 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 durch Tabs oder auf andere Weise anvisiert worden sein oder sogar über JavaScript fokussiert werden, wie zum Beispiel…

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

Browser-Unterstützung