как нацелить родительский div на фокус дочернего div, используя sass.?

Question

Как я могу сделать так, чтобы на Focus on input поменял цвет фона текста ..?Что именно я делаю не так?пожалуйста, дайте мне знать .. спасибо

.parent_div {
  background: lightblue;
  .child_div {
    input {
      color: grey;
      background: blue;
      &:focused {
        color: purple;
        background: white;
      }
      &:focused~grand-child-of-parent {
        opacity: 0.7;
        background: red;
      }
    }
  }
}

<div class="parent_div">
  <div class="first_child">
    <input type="text" />
  </div>
  <p class="second_child"> is simply dummy text of the printing and typesetting industry.</p>
</div>

Answer 1

К сожалению, это невозможно, так как нет селектора "grand-child-of-parent".

Вы можете изменить фон и текст самого ввода, когда он получает фокусы, но выневозможно изменить стили родительских элементов без использования JavaScript.

В этом случае прослушайте событие focus с помощью JavaScript и добавьте / удалите класс модификатора, например, для родительского элемента.

HTML:

<div class="parent-class">
  <input class="field" type="text" />
  <div class="child-class">
    <p>Bla</p>
  </div>
</div>

CSS:

.child-class {
  background: red;
}
.focused .child-class {
  background: green;
}

JavaScript (jQuery):

$('.field').on('focus', function() {
  $(this).parent().addClass('focused');
})
$('.field').on('blur', function() {
  $(this).parent().removeClass('focused');
})