CSS - Selecting Previous Sibling

css, html

Solution

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" });
});

Problem

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?

Original source

Related problems