Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:focus-within
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die:focus-withinCSSPseudoklasse wählt ein Element aus, wenn dieses Element oder eines seiner Nachkommen fokussiert ist. Mit anderen Worten, es repräsentiert ein Element, das selbst durch die:focus Pseudoklasse ausgewählt wird oder einen Nachkommen hat, der durch:focus ausgewählt wird. (Dies schließt Nachkommen inShadow-Bäumen ein.)
Probieren Sie es aus
label { display: block; margin-top: 1em;}label:focus-within { font-weight: bold;}<form> <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></form>Dieser Selektor ist nützlich, um ein gängiges Beispiel zu nennen, um einen gesamten<form>-Container hervorzuheben, wenn der Benutzer eines seiner<input>-Felder fokussiert.
Syntax
:focus-within { /* ... */}Beispiele
In diesem Beispiel wird das Formular spezielle Farbgebungsstile erhalten, wenn eines der Texteingabefelder fokussiert wird.
HTML
<p>Try typing into this form.</p><form> <label for="given_name">Given Name:</label> <input type="text" /> <br /> <label for="family_name">Family Name:</label> <input type="text" /></form>CSS
form { border: 1px solid; color: gray; padding: 4px;}form:focus-within { background: #ffff88; color: black;}input { margin: 4px;}Ergebnis
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # the-focus-within-pseudo |