Zmiana stylu elementu B podczas zdarzenia hover na A

W jaki sposób zmienić styl elementu B po najechaniu myszką na element A jeżeli element A znajduje się w DOM poniżej elementu B?

<div id="B">Text</div>
<button id="A">Btn</button>

Nie działają:

#A:hover + #B {
  color: red;
}

#A:hover ~ #B {
  color: red;
}

#A:hover #B {
  color: red;
}

Nie widzę na to sposobu, jesli musisz tak zrobić to albo coś źle zaprojektowałeś albo musisz uzyć js

edit. meh sry, nie myśle już dziś

@Wiara czyni cuda: zobacz sobie na pierwszą odpowiedź w tym wątku – On a CSS hover event, can I change another div's styling? Co nieco da się zrobić, nawet bez dotykania skryptów.

Dla B i A obok siebie w tym samym zasobniku, gdzie B występuje pierwsze (jak w załączonym kodzie):

#B:hover ~ #A {
  color: green;
}

Jeśli B byłby rodzicem A:

#B:hover > #A {
  color: green;
}

Jeśli A byłby rodzicem B, to zostaje JS, albo czekanie na kolejne specyfikacje CSS:
https://jcubic.pl/2018/04/selektor-css-dla-rodzica.html

Mój błąd - chcę zmienić styl elementu B podczas najechania na element A.
Napisałem na końcu: ' jeżeli element A znajduje się w DOM poniżej elementu B'.

Wysłałem to pytanie też tutaj: https://stackoverflow.com/questions/51865331/change-the-style-of-element-b-during-the-hover-event-to-a
Dostałem odpowiedź, że w css się tego zrobić nie da.

furious programming napisał(a):

@Wiara czyni cuda: zobacz sobie na pierwszą odpowiedź w tym wątku – On a CSS hover event, can I change another div's styling? Co nieco da się zrobić, nawet bez dotykania skryptów.

Tam też byłem ale podane sposoby nie działają.

Nie dam głowy, czy przez "element A znajduje się w DOM poniżej elementu B" rozumiesz, że:
a) występuje po prostu później w kodzie (chyba o to ci właśnie chodzi),
b) występuje niżej w hierarchii drzewa DOM (jak bym ja to rozumiała).

Jeśli "a" to nie da się tego zrobić w CSS. Ale możesz wyświetlić je w kodzie w kolejności: AB, a później zamienić kolejność wyświetlania elementów na stronie za pomocą order:
https://www.w3schools.com/cssref/css3_pr_order.asp
albo nawet bardziej prostacko, zmieniając ich position. Order ma tą przewagę, że nie musisz już pilnować ile pikseli, w którą stronę trzeba co przesunąć, więc będzie działać poprawnie także na elementach o zmiennym rozmiarze.

Zmiana kolejności wyświetlania elementów rozwiązuje problem.
Nie da się jednak tego zrobić chociażby za pomocą np. sass/less itd.?

@Freja Draco chodziło mi o podpunkt a.

Sass i Less to tylko preprocesory CSS-a. Pozwalają pisać wygodniejszy/oszczędniejszy kod, który finalnie i tak zostanie sprowadzony do zwykłego CSS, więc nie pozwolą ci zrobić niczego, czego nie potrafi goły CSS.

Możliwe, że dałoby się coś takiego zrobić za pomocą EQCSS
https://elementqueries.com
który jest biblioteką js, rozwijającą mechanizmy renderowania przeglądarki i pozwalającą używać w arkuszu CSS niedostępnych tam obecnie funkcji.

Niemniej zdrowy rozsądek i ekonomia sugerują użyć prostego JS-a albo order.