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 parent2 div. style i.e. background,color like anything. I need mouse over effect on this requirement. I need only with css, without jquery.

I given the structure below. child2 is inside child1 and child1 is inside parent1. child4 is inside child3 and child3 is inside parent2. parent1 and parent2 those are siblings.

parent1 > child1 > child2
parent2 > child3 > child4

You can't do that using CSS alone. You'll need to use javascript. The only thing you could do with CSS is if you hover over parent1, you can change the style of child4 in parent2. — Michael Coker, Mar 07 '17 at 18:01

score 1 · Accepted Answer · edited May 23 '17 at 11:46

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>

childrens selectors from sibling parent divs using css for hover effect

1 Answers1

Linked