Pseudoklasa focus-within

Pseudoklasa focus-within zadaje stil elementima koji su u fokusu. Za razliku od pseudoklase focus, koja zadaje stil direktno samom elementu, focus-within zadaje stil za roditeljski element.

Sintaksa

cssselektor:focus-within {

}

Primer

Hajde da zadamo plavu boju pozadine roditeljskom elementu, kada je njegov podređeni input element u fokusu:

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

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

Результат:

Pogledajte takođe