Pseudoklasė focus-within

Pseudoklasė focus-within nustato stilių elementams, kurie yra fokuse. Skirtingai nuo pseudoklasės focus, kuri nustato stilių tiesiogiai pačiam elementui, focus-within nustato stilių tėviniam elementui.

Sintaksė

cssselektorius:focus-within {

}

Pavyzdys

Nustatykime šviesiai mėlyną tėvinio elemento foną, kai jo vaikinis įvesties laukas yra fokuse:

html<div>
  Įveskite savo vardą: <input name="user">
</div>

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

Результат:

Taip pat žiūrėkite