Стиль не применяется к родителю в CSS

Question

У меня есть инпут, который находится в диве, при фокусе инпута долдно применяться стиль CSS к родителю див, но ничего не робит. Может кто-то помоxь и сказать что это за магия вне Хогвартса? Заранее благодарен всем

div {
  display: flex;
  flex-direction: column;
  margin: 16px;
  padding: 24px;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .4);
}

input:focus div {
  box-shadow: 0 0 16px 4px rgba(255, 0, 0, .4);
}

<div>
  <label for="number2">На что делить</label>
  <input type="text" id="number2">
</div>

Answer 1

div {
  display: flex;
  flex-direction: column;
  margin: 16px;
  padding: 24px;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .4);
}

div:focus-within {
  box-shadow: 0 0 16px 4px rgba(255, 0, 0, .4);
}

div input {
  outline: none;
}

<div>
  <label for="number2">На что делить</label>
  <input type="text" id="number2">
</div>

БЛОГ НА HUSL

Стиль не применяется к родителю в CSS

Ответы (1 шт):