Der Pseudoklasse focus-within

Der Pseudoklasse focus-within legt den Stil für Elemente fest, die im Fokus sind. Im Gegensatz zum Pseudoklasse focus, der den Stil direkt für das Element selbst festlegt, legt focus-within den Stil für das Elternelement fest.

Syntax

cssselektor:focus-within {

}

Beispiel

Lassen Sie uns die Hintergrundfarbe des Elternelements blau färben, wenn sein untergeordnetes Input-Element fokussiert ist:

html<div>
  Geben Sie Ihren Namen ein: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

Siehe auch

Pseudoklasse :indeterminate,
die den Stil für Umschaltflächen festlegt, die sich in einem unbestimmten Zustand befinden
Pseudoklasse :default,
die den Stil für Standardelemente festlegt
Pseudoklasse :fullscreen,
die den Stil für Elemente im Vollbildmodus festlegt
Pseudoklasse :placeholder-shown,
die den Stil für Elemente bei der Anzeige von Platzhaltertext festlegt
Eigenschaft caret-color,
die die Farbe des Textcursors im Input festlegt