CSS: select previous sibling

Question

I've got a list and want to select the previous and next of the one I am hovering

<ul>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
</ul>

I am able to select the next sibling with the "+" selector. But is there a possibility to get the previous?

ul li:hover + li {
    color:red;
}

I already tried ul li + li:hover but it doesn't work. Can't belief there is no tricky hack that I could use.

Sure I can do this easily through Javascript but I don't like using JS where I can get the same result with CSS.

there is no previous sibling selector in __css__ – Pranav C Balan Jan 20 '14 at 15:00 — Pranav C Balan, Jan 20 '14 at 15:00

score 14 · Accepted Answer · answered Jan 20 '14 at 15:01

14

There's no way to do this with pure CSS, if you really must select the previous sibling, you're going to have to resort of Javascript or suchlike.

answered Jan 20 '14 at 15:01

arandompenguin

1 Answers1