CSS-Pseudoklasse :focus-within
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die CSS-Pseudoklasse :focus-within wählt ein Element aus, wenn dieses Element oder eines seiner Nachfahren den Fokus hat. Anders ausgedrückt: Sie steht für ein Element, auf das entweder selbst die Pseudoklasse :focus zutrifft oder das einen Nachfahren hat, auf den :focus zutrifft. Dazu gehören auch Nachfahren in Shadow Trees.
Mit diesem Selektor lässt sich beispielsweise ein gesamter <form>-Container hervorheben, wenn ein <input>-Feld darin den Fokus erhält.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
Syntax
:focus-within {
/* ... */
}
Beispiele
In diesem Beispiel erhält der Container eine besondere Farbgestaltung, sobald eines der Texteingabefelder den Fokus erhält.
HTML
<ul class="group">
<li>
<label for="given-name">Given Name:</label>
<input id="given-name" type="text" />
</li>
<li>
<label for="family-name">Family Name:</label>
<input id="family-name" type="text" />
</li>
</ul>
CSS
.group {
list-style: none;
border: 1px solid;
color: gray;
padding: 4px;
}
.group:focus-within {
background: #ffff88;
color: black;
}
input {
margin: 4px;
}
Ergebnis
Versuchen Sie, Text in die Eingabefelder einzugeben.
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # the-focus-within-pseudo |