How to refer to an object in css?

Question

css

How to access the previous element? A bit of a stupid question, but I was interested in the possibilities of reversal in css. Are there only children, neighbors, and successors, or is there something that escaped my notice?
Example: there is a list and how to make the color of the first and second elements change to red when hovering over .hover?

<ul>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li class="hover">Lorem ipsum.</li>
</ul>

Is it the only way, or are there counters like the reverse "~"? "when you hover over .hover, change the color of the previous ones to red"

Answer 1

Good hamburger buttons can be taken from this mini-library, and the principle of operation is as follows: when you click on a hamburger, you substitute the is-active class and also substitute your class for the navigation menu (if, for example, it is hidden, then the is-open class that shows it) . The most convenient way to hide the menu is through position: absolute and left/right -500+px, but remember, if you hide the menu on the right side, then it will still be visible and the bottom scroll will appear. This needs to be taken into account and set overflow: hidden for the parent element.

Answer 2

While this is not possible, but in the fourth version of the specification it will appear:

li:has(~ .hover:hover) {
  color: red;
}

Answer 3

As an option like this;) on crutches https://jsfiddle.net/9zsc7b9L/