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

selektor:focus-within {

}

Beispiel

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

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

div {
	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