CSS adjacent selector doesn't work

Question

Consider I have this DOM,

<div id="banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

I want to select p from button why below css doesn't work?

#banner-message {
  button {
    & + p {
      color: red;
    }
  }
}

Andy Aldo · Answer 1 · 2018-11-02T10:45:25.843

0

Remove the &. By the way, in your SCSS, you're selecting button + p but in your markup it's p + button. See here for demo

edited Nov 02 '18 at 10:45

answered Apr 03 '18 at 08:25

Andy Aldo

850
9
24

you don't change my DOM lol – Sharon Chai Apr 03 '18 at 08:32
oops, my bad. as the others may have highlighted, as of now there is no way to traverse back. – Andy Aldo Apr 03 '18 at 08:41

score 0 · Accepted Answer · answered Apr 03 '18 at 08:29

The code given is not working as you are traversing previous siblings. CSS selectors work for next siblings. There is no previous sibling selector. You can refer to the accepted answer for Is there a "previous sibling" CSS selector? for more information. Otherwise you will have to change the markup as mentioned by @Andy Aldo.

score 0 · Answer 3 · answered Apr 03 '18 at 08:31

0

With the + selector, you are selecting the <p> AFTER the button... See this: https://jsfiddle.net/8y2mstbo/2/

answered Apr 03 '18 at 08:31

Zeronull

221
2
4

score 0 · Answer 4 · answered Apr 03 '18 at 08:34

0

This is not possible with css to select previous element. so you should try script for this or you should change the structure.

answered Apr 03 '18 at 08:34

Shiva

172
1
10

CSS adjacent selector doesn't work

4 Answers4