Как применить правило CSS к предыдущему и следующему элементу в HTML?

Например:

У вас есть следующее:

<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;
}

Это возможно?

ОТВЕТЫ

Ответ 1

Это невозможно с чистым css. Вы можете стилизовать следующий, но не предыдущий элемент.

Но вы можете сделать трюк с css. Вместо выделения класса вы можете присвоить класс своему предыдущему элементу. Вот так:

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;
}

Отметьте http://jsfiddle.net/S5kUM/2/

Ответ 2

Он назвал селектор sibling:

.selected + li {
   color: red;
}

Fiddle здесь

Однако для предыдущего элемента нет селектора для сиблинга.

Ответ 3

Это нужно сделать с помощью JavaScript.

Если вы используете jQuery, это можно сделать следующим образом:

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