Pseudotřída focus-within

Pseudotřída focus-within nastavuje styl prvkům, které jsou ve fokusu. Na rozdíl od pseudotřídy focus, která nastavuje styl přímo samotnému prvku, focus-within nastavuje styl pro rodičovský prvek.

Syntaxe

cssselektor:focus-within {

}

Příklad

Nastavme modrou barvu pozadí rodičovskému prvku, když je jeho potomkovský prvek input ve fokusu:

html<div>
  Zadejte své jméno: <input name="user">
</div>

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

Результат:

Viz také