У меня проблема с фокусировкой ребенка на родителей

Question

У меня есть этот код в HTML:

<div class="firstname-input">
  <input type="text" id="firstname" name="firstname" placeholder="First name">
  <button onclick="showName()"><figure></figure></button>
</div>

Я хочу добавить рамку: 2px solid # f90; на .firstname-ввод, в фокусе ввод И если я напишу это:

.firstname-input input:focus .firstname-input {
    opacity: .1;
}

Это не работает.

Answer 1

Используйте

.firstname-input:focus-within {}

и добавьте выбранные вами стили