CODEWITHSUNDEEP
htmlcsscss-selectors
hjef
hjef

Reputation: 45

Selecting multiple adjacent siblings (and their children)

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

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

JSFiddle

Upvotes: 2

Views: 2179

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157414

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 */
}

Demo 2

Upvotes: 0

nolawi
nolawi

Reputation: 4649

UPDATED this fiddle

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

edited use the above instead, apparently + only works with immediate sibling http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/

Upvotes: 1

Related Questions