чисто CSS сосредоточиться на родительском элементе и изменить стили на дочернем элементе [CSS / SCSS]

Question

Мне интересно, есть ли способ, если вы сосредоточитесь на родительском элементе, можете ли вы изменить стиль дочернего элемента без javascript, скажем, у меня есть

<li class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

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

.parent{
   &:focus{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

но это, похоже, не работает, теперь я знаю, что могу сделать это с помощью javascript, но мне просто интересно, есть ли чистый способ CSS сделать это?

Любая помощь будет оценена!

Answer 1

Да, это возможно, но вам нужно уточнить и понять термин «сосредоточиться на элементе».

Если вы имеете в виду наведение курсора мыши, иначе указатель мыши, то вы можете обновить SASS с помощью &:hover до следующего значения:

.parent{
   &:hover{
      & .child1{
         background: green;
      }
      & .child2{
         background: green;
      }
   }
}

Однако, если вы действительно имеете в виду фактическое событие фокуса, вам нужно знать, какие элементы могут получить фокус по умолчанию из-за нажатия клавиш или взаимодействия с клавиатурой.

li не является "фокусируемым" по умолчанию, но вы можете изменить это, добавив к нему tabindex="0":

<li class="parent" tabindex="0">
    <div class="child1"></div>
    <div class="child2"></div>
</li>

tabindex следует использовать как можно меньше, так как это может иметь более серьезные последствия для доступности.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex