CSS - Selecting Previous Sibling [duplicate]

Question

I have two elements:

<div id="next_prayer">...</div>
<div class="prayers_lower">...</div>

I am trying change the height of #next_prayer when prayers_lower is hovered on.

Here is my CSS:

.prayers_lower {
  min-height: 10%;
  height: 10%;
}
.prayers_lower:hover {
  height: 30%;
}
.prayers_lower:hover + #next_prayer {
  height: 60%;
}
.prayers_lower:hover ~ #next_prayer {
  height: 60%;
}
.prayers_lower:hover ~ #next_prayer {
  height: 30%;
}

.prayers_lower:hover ~ #next_prayer {
  height: 30%;
}

Nothing is working - I don't see any of the styles being applied to the ~ selected elements.

How can I make this work?

Answer 1

The adjacent sibling selector + and general sibling selector ~ can only select elements following after the first referenced element. In your HTML, you are trying to select an element that comes BEFORE the referenced element.

There is no "previous" sibling selector in the CSS spec. You'll need to use javascript in this case, or find another element to use to reference your #next_prayer div.

With jQuery, you can achieve this functionality:

$('div.prayers_lower').hover(
    function() {
        $(this).prev().animate({ height: "30%" });
}, function() {
        $(this).prev().animate({ height: "auto" });
});