I have some html which looks something like this
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>I want to apply a style on any specific <li> on hover AND apply a different style to the previous and next <li> elements (the one next to the hovered one).
If possible I want to do this with pure css (no JS).
So to be clear there are 3 different states and 3 different sets of styles a <li> could have
- the element is hovered over.
- the element is not hovered over but the element before or after it is hovered over.
- the element is not hovered over and the elements before or after it are not hovered over.
I know that the :hover psudo selector can be used to apply a style to the hovered element - no problem
I know that the next element can be selected with :hover + li - no problem
Applying a style to the previous element is however a problem.
I know there is no previous sibling selector, is this still the case?
I have looked at another stack overflow post which talks about applying a style directly to the previous sibling and then using two adjasent sibling selectors to apply styles to the 2nd and 3rd elements. I cant do that in this case because the hover has to be on the 2nd element.
I have considered using [attribute] selectors combined with attr()
my plan would be to give each li a data attribute and a unique specific number, ie <li data="1">
on hover the attr() feature would be used to read the previous elements data attribute and then pass that to the [attribute] selector.
it might look something like this
li:hover [data-number-type=attr(data-number-type)]<ul>
<li data-number-type="1">Owl</li>
<li data-number-type="2">Owl</li>
<li data-number-type="3">Owl</li>
<li data-number-type="4">Owl</li>
<ui/>That snippet of code does not work. but is there any way to get something like that working?
Is there any other css only way that i have not considered?
