Pseudo-klassen focus-within

Pseudo-klassen focus-within anger stilen för element som är i fokus. Till skillnad från pseudo-klassen focus, som anger stilen direkt för själva elementet, sätter focus-within stilen för föräldraelementet.

Syntax

cssselektor:focus-within {

}

Exempel

Låt oss ange en ljusblå bakgrundsfärg för föräldraelementet, när dess underordnade input-element är i fokus:

html<div>
  Ange ditt namn: <input name="user">
</div>

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

Результат:

Se även