Pseudotrieda focus-within

Pseudotrieda focus-within nastavuje štýl prvkom, ktoré sú v ohnisku. Na rozdiel od pseudotriedy focus, ktorá nastavuje štýl priamo samotnému prvku, focus-within nastavuje štýl pre rodičovský prvok.

Syntax

cssselektor:focus-within {

}

Príklad

Nastavme modrú farbu pozadia rodičovského prvku, keď je jeho dcérsky prvok input v ohnisku:

html<div>
  Zadajte vaše meno: <input name="user">
</div>

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

Результат:

Pozrite tiež