Select sibling elements up the dom tree

Question

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/

no there is no current way to select a parent / higher sibling element in CSS — badAdviceGuy, Feb 04 '14 at 17:15
i m not sure but this might help you http://pranayamr.blogspot.no/2013/01/css-selector.html — Pranay Rana, Feb 04 '14 at 17:20

score 1 · Accepted Answer · answered Feb 04 '14 at 17:21

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>

score 1 · Answer 2 · answered Feb 04 '14 at 17:40

1

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/

answered Feb 04 '14 at 17:40

Arasu RRK

1,078
16
28

Link only answers are discouraged on SO. – j08691 Feb 04 '14 at 18:13

Select sibling elements up the dom tree

2 Answers2