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

Question

Например:

У вас есть это:

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

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

Answer 1

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

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

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/

Answer 2

Это называется селектором родного брата:

.selected + li {
   color: red;
}

Скрипка здесь

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

Answer 3

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

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

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

Answer 4

Вы можете использовать display: flex; и flex-direction: row-reverse;, чтобы перевернуть список.

http://codepen.io/bscherer/pen/XMgpbb