Pseudoclasa focus-within

Pseudoclasa focus-within definește stilul elementelor care sunt în focalizare. Spre deosebire de pseudoclasa focus, care definește stilul direct elementului însuși, focus-within definește stilul pentru elementul părinte.

Sintaxă

cssselector:focus-within {

}

Exemplu

Să setăm culoarea de fundal albastră pentru elementul părinte, când elementul copil input este în focalizare:

html<div>
  Introduceți numele dvs.: <input name="user">
</div>

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

Результат:

Vezi și