Sibling hover via css doesn't work - why?

Question

I try to manipulate the sibling of an element by hovering its sibling element. I do it like that:

.sw_2-technik + .sw_2-emotionen{
    background:green;
}

.sw_2-emotionen:hover ~ .sw_2-technik{
    background:orange;
}

Whereas the html-structure is kinda like that:

<section class="wrapper">
<div class="sw_2-technik"></div>
<div class="sw_2-emotionen"></div>
</section>

Whilst the first operation works nicely, the second one (.sw_2-emotionen:hover ~ .sw_2-technik) does nothing. What do I do wrong there?

Thanks!

If you want to target a previous sibling with CSS, here's a clean and simple method: http://stackoverflow.com/a/36118012/3597276 — Michael Benjamin, Feb 16 '17 at 22:23

score 3 · Accepted Answer · answered Feb 16 '17 at 21:49

3

Sibling selectors only affect elements when the second one comes after the first on the page - not the other way around.

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

answered Feb 16 '17 at 21:49

Michael Coker

But don't I have exact that situation? With both siblings within the same wrapper (common parent) and - though I don't know exactly what "preceded" means - the second element really follows up directly after the first one. Or do I get something wrong there? Thanks! – Daiaiai Feb 16 '17 at 21:52
@Daiaiai put `sw_2-emotionen` before `sw_2-technik` and you'll see. – dokgu Feb 16 '17 at 21:54
@uom-pgregorio But I thought "+" was especially used for these siutations to target an element right AFTER that one? Why should I then at all use "~" So the plain answer is: The situation I do have is not doable without JS? – Daiaiai Feb 16 '17 at 22:00
1

@Daiaiai the first element needs to preceed the second element on the page, as in, in the HTML source. – Michael Coker Feb 16 '17 at 22:00
2

@Daiaiai you would use `~` if there was 1 or more elements in between the 2 elements that you're targeting. – Michael Coker Feb 16 '17 at 22:01
@Daiaiai here's a CSS selectors [cheat sheet](https://www.w3schools.com/cssref/css_selectors.asp) for you. Apologies for using W3Schools. – dokgu Feb 16 '17 at 22:03

1 Answers1