Select sibling elements up the dom tree [duplicate]

Question

This question already has answers here:

Is there a "previous sibling" selector? (27 answers)

Closed 8 years ago.

Trying to select sibling elements on hover one element. Is there any way to select the elements up the dom tree also? I'm looking for a CSS solution only.

<div id="a">Div A</div>
<div id="b">Div B</div>
<div id="c">Div C</div>
<div id="d">Div D</div>

<style>

#a:hover ~ #b,
#a:hover ~ #c,
#a:hover ~ #d{
    background: #ccc
}

#b:hover ~ #a,
#b:hover ~ #c,
#b:hover ~ #d{
    background: #ccc
}

#c:hover ~ #a,
#c:hover ~ #b,
#c:hover ~ #d{
    background: #ccc
}

#d:hover ~ #a,
#d:hover ~ #b,
#d:hover ~ #c{
    background: #ccc
}

</style>

http://jsfiddle.net/u7tYE/3381/

Answer 1

I you use a parent container, and i guess it has, you can get something really close with little CSS. http://jsfiddle.net/u7tYE/3382/

#all:hover div {
    background:#ccc;
}
#all:hover div:hover {
    background:none;
}

<div id="all">
    <div id="a">Div A</div>
    <div id="b">Div B</div>
    <div id="c">Div C</div>
    <div id="d">Div D</div>
</div>

Answer 2

All you need to know about css selectors. Please read this http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/