Psevdorazred focus-within

Psevdorazred focus-within določa slog elementom, ki so v fokusu. Za razliko od psevdorazreda focus, ki določa slog neposredno samemu elementu, focus-within določa slog za starševski element.

Sintaksa

cssselektor:focus-within {

}

Primer

Določimo modro barvo ozadja starševskemu elementu, ko je njegov podrejeni element vnosno polje v fokusu:

html<div>
  Vnesite vaše ime: <input name="user">
</div>

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

Результат:

Glejte tudi