how to apply css rule to the previous and the next element in HTML?

Question

For example:

You have this:

<ul>
 <li>zero</li>
 <li>one</li>
 <li class="selected">two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS:

.selected:previous {
   color: red;
}

.selected:next {
   color: green;
}

That's possible?

Don't think a CSS only solution is available but a *pure* JavaScript option would be: http://stackoverflow.com/questions/574904/get-next-previous-element-using-javascript — Greg, Mar 16 '12 at 08:30
possible duplicate: http://stackoverflow.com/q/1817792/3597276 — Michael Benjamin, Mar 13 '16 at 00:17

score 24 · Accepted Answer · edited Mar 16 '12 at 08:26

It's not possible with pure css. You can style next but not previous element.

But you can do a trick with css. Instead of give class selected you can give class to your previous element. Like this:

HTML

<ul>
 <li>zero</li>
 <li class="previous">one</li>
 <li>two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS

.previous{
   color: green;
}
.previous + li{
   color: red;
}
.previous + li + li{
    color:yellow;
}

score 6 · Answer 2 · answered Mar 16 '12 at 06:37

6

It's called sibling selector:

.selected + li {
   color: red;
}

Fiddle here

However, there is no sibling selector for the previous element.

answered Mar 16 '12 at 06:37

r_31415

score 2 · Answer 3 · answered Mar 16 '12 at 06:32

2

This would have to be done with JavaScript.

If you are using jQuery, it can be done like this:

$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');

answered Mar 16 '12 at 06:32

Colin Kenney

4

`how to apply css rule` implies OP wants CSS answer – Starx Mar 16 '12 at 06:51

score 1 · Answer 4 · answered Mar 14 '17 at 07:55

1

You can use display: flex; and flex-direction: row-reverse; to reverse the list.

answered Mar 14 '17 at 07:55

captainpixel

4 Answers4