Is there a way to change the style of child elements when focusing on a parent element without using javascript? For example, let's say we have:
<li class="parent">
<div class="child1"></div>
<div class="child2"></div>
</li>
If we want to change the style of both child elements when focusing on the parent element, one might attempt the following CSS:
.parent {
&:focus {
.child1 {
background: green;
}
.child2 {
background: green;
}
}
}
However, this method does not seem to work as intended. While this task could easily be accomplished with javascript, I am curious to know if there is a purely CSS-based solution available.
Any assistance on this matter would be greatly appreciated!