Fokus-within-pseudoluokka

Pseudoluokka focus-within asettaa tyylin elementeille, jotka ovat fokuksessa. Toisin kuin pseudoluokka focus, joka asettaa tyylin suoraan itse elementille, focus-within asettaa tyylin vanhempielementille.

Syntaksi

cssvalitsija:focus-within {

}

Esimerkki

Asetetaan vaaleansininen taustaväri vanhempielementille, kun sen lapsielementti input on fokuksessa:

html<div>
  Kirjoita nimesi: <input name="user">
</div>

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

Результат:

Katso myös