css adjust previous sibling properties

Question

Im trying to adjust the previous sibling when the first sibling has a hover state. I have put together an example here. Im trying to get it to stay at 100% width of the viewport and adjust the div you are hovered over to be 60% and the other child to be 40%.

https://jsbin.com/xucipevuzi/edit?html,css,output

This gets the next sibling but i cant find a good way to get the previous when the first one has a hover.

&:hover
  width 60%
  + div
     width 40%

There is no previous selector in css, I suggest to do it with js — Renzo Calla, Oct 03 '17 at 21:01
You can't get the previous sibling in CSS. You would have to use Javascript. — WizardCoder, Oct 03 '17 at 21:01

score 1 · Accepted Answer · answered Oct 03 '17 at 21:32

1

There is no CSS selector going back up the HTML tree ( Cascaded Style Sheet )

for this case, you can set every div to 40% when hovering parent and 60% when hovering parent and hovering the div :

.two-selection:hover div
      width 40%    

.two-selection:hover div:hover
      width 60%

https://jsbin.com/risenihejo/1/edit?html,css,output

answered Oct 03 '17 at 21:32

G-Cyrillus

101,410
14
105
129

Elegant solution. – showdev Oct 03 '17 at 22:00

css adjust previous sibling properties

1 Answers1