Pseudo-klassen focus-within

Pseudo-klassen focus-within setter stil for elementer som er i fokus. I motsetning til pseudo-klassen focus, som setter stil direkte på selve elementet, setter focus-within stil for foreldreelementet.

Syntaks

cssvelger:focus-within {

}

Eksempel

La oss sette en lyseblå bakgrunnsfarge på foreldreelementet, når dets barnelement input er i fokus:

html<div>
  Skriv inn navnet ditt: <input name="user">
</div>

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

Результат:

Se også

pseudo-klassen :indeterminate,
som setter stil for vekslebrytere som er i en ubestemt tilstand
pseudo-klassen :default,
som setter stil for standardelementer
pseudo-klassen :fullscreen,
som setter stil for elementer i fullskjermsmodus
pseudo-klassen :placeholder-shown,
som setter stil for elementer når plassholdertekst vises
egenskapen caret-color,
som setter fargen på tekstmarkøren i input