Почему этот элемент выбирает себя?

Question

Я пытаюсь выделить элемент списка, которому предшествует элемент, зависающий.

<ul> 
    <li><a href="#">link</a></li> <!-- this one should be highlighted when... --> 
    <li><a href="#">link</a></li> <!-- ...this one is hovered --> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul> 

Однако селектор я использую, li + li:hover, по какой-то причине выбирает сам. li:hover + li выбрал li сразу после один парил, но мне нужен тот сразу до это. Я использую неправильный селектор?

Вот fiddle демонстрирует проблему:

Answer 1

Селектор плюс выбирает элемент следующий плюс. Так li + li:hover ищу парили li сразу предшествует других li

См The Adjacent-Sibling Selector

Это пробел в CSS, что это, вероятно, лучше заполнено Javascript.

Answer 2

Комбинации CSS могут иметь доступ только к потомкам и более поздним братьям и сестрам. Они не могут получить доступ к предыдущим.

После CSS4 происходит вокруг, вы можете сделать это:

!li! + li:hover 

(Примечание: Синтаксис не завершен, насколько я знаю)

Однако, в то же время, попробуйте следующее:

ul, ul>li {transform:scaleY(-1)} 

И обратный порядок элементов в списке.

Demo