CSS - Selecting Previous Sibling

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?

Are you using LessCSS or something similar? Because this isn't valid W3-style CSS. It's fine if you're using something to augment your css language tho, probably. Also, you need to remove the `#` in your `
` — Chiri Vulpes, Jul 10 '14 at 00:02
@JoshKG Rather than waste time editing this low effort question, you should have just voted to close it as a duplicate. — cimmanon, Apr 21 '16 at 15:19

Josh KG · Accepted Answer · 2014-07-10T14:03:27.373

3

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

edited Jul 10 '14 at 14:03

answered Jul 10 '14 at 00:04

Josh KG

5,050
3
20
24

So I cannot do anything about element before? – Mohamed El Mahallawy Jul 10 '14 at 00:04
+1 for the answer. I am using angularjs so got to figure out my own way! – Mohamed El Mahallawy Jul 10 '14 at 16:36

score 1 · Answer 2 · answered Jul 10 '14 at 00:07

The best way to achieve this effect in pure CSS is by wrapping them into a container

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

Because when hovering children you're also hovering wrapper, then you just have to overwrite

.wrapper:hover #next_prayer
{
    /*Effects on #nextprayer when .prayers_lower is hovered*/
}
.wrapper:hover #next_prayer:hover
{
    /*Effects on #next_prayer when it is hovered, you must overwrite every style
    from above rule that should'nt be visible when #next_prayer is hovered*/
}
.wrapper:hover .prayers_lower
{
    /*Effects on .prayers_lower when #newt_prayer is hovered*/
}
.wrapper:hover .prayers_lower:hover
{
    /*Effects on .prayers_lower when it is hovered, and you must by the way
    overvwrite unwanted styling from above rule*/
}

Preview : JSBin

CSS - Selecting Previous Sibling

2 Answers2