Pseidoklase focus-within

Pseidoklase focus-within nosaka stilu elementiem, kas atrodas fokusā. Atšķirībā no pseidoklases focus, kas nosaka stilu tieši pašam elementam, focus-within nosaka stilu vecākelementam.

Sintakse

cssselektors:focus-within {

}

Piemērs

Uzstādīsim gaiši zilu fona krāsu vecākelementam, kad tā apakšējais elements ievades lauks atrodas fokusā:

html<div>
  Ievadiet savu vārdu: <input name="user">
</div>

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

Результат:

Skatiet arī