Pseudoklass focus-within

Pseudoklass focus-within määrab stiili elementidele, mis on fookuses. Erinevalt pseudoklassist focus, mis määrab stiili otse elemendile endale, focus-within määrab stiili vanemelemendile.

Süntaks

cssvalija:focus-within {

}

Näide

Määrame vanemelemendi taustale helesinise värvi, kui selle laps-element input on fookuses:

html<div>
  Sisesta oma nimi: <input name="user">
</div>

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

Результат:

Vaata ka