childrens selectors from sibling parent divs using css for hover effect

Question

I have two sibling divs(parent divs) and those have child divs. If I mouse hover on the child2 div inside parent1, I wanted to change the style of child4 div inside the parent

Answer 1

You can't go back in the DOM with pure CSS, that is why it is only possible to select childs, siblings and childs of siblings when hovering an element. The following demonstrates what currently can be selected by hovering the first parent:

#parent1:hover > div {
  color: blue;
}
#parent1:hover > div > div {
  color: purple;
}
#parent1:hover ~ div {
  color: red;
}
#parent1:hover ~ div > div {
  color: orange;
}
#parent1:hover ~ div > div > div {
  color: green;
}

#parent1 {
  border: 1px solid blue;
}
div {
  margin: 5px 0;
}
div > div {
  margin-left: 15px;
}

<div id="parent1">
  Parent1 (target)
  <div>Child1
    <div>Child2</div>
  </div>
</div>

<div>
  Parent2
  <div>Child1
    <div>Child2</div>
  </div>
</div>