Selecting multiple adjacent siblings (and their children)

Question

How can I change the styles of my div's 2 siblings when hovering over it?

#magic:hover + (#sibling1 > span, #sibling2 > span){color: blue}

See also: [Are parentheses allowed in CSS selectors?](http://stackoverflow.com/questions/5478920/are-parentheses-allowed-in-css-selectors) and [CSS combinator precedence?](http://stackoverflow.com/questions/3851635/css-combinator-precedence) — BoltClock, May 19 '14 at 17:05

nolawi · Answer 1 · 2014-05-19T13:47:09.793

1

UPDATED this fiddle

#magic:hover ~ .box span {color: blue}

edited May 19 '14 at 13:47

answered May 19 '14 at 00:25

nolawi

Unfortunately, this only changes the first sibling's style – hjef May 19 '14 at 09:34
This will select the following siblings, you can't select earlier siblings with css alone. – pstenstrm May 19 '14 at 14:07

score 0 · Accepted Answer · edited May 19 '14 at 16:55

0

Why not use adjacent selector to achieve that?

#magic:hover + #sibling1 + #sibling2 span {
    color: red;
}

Demo (Hover the first element and see the color changes for the 3rd element)

And if you want to change the styles of all the element followed by #magic, than use

#magic:hover + #sibling1 span,
#magic:hover + #sibling1 + #sibling2 span {
    /* Styles goes here */
}

edited May 19 '14 at 16:55

BoltClock

answered May 19 '14 at 14:02

Mr. Alien

2 Answers2