Селектор CSS для следующих и предыдущих элементов

Как настроить таргетинг на элемент списка отдельно, например, я хотел бы сделать:

Html:

<ul class="roundabout-holder">
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item roundabout-in-focus"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
    <li class="roundabout-moveable-item"></li>
</ul>

Css:

.roundabout-in-focus{
font-size:1em;
}

.roundabout-in-focus.prev(),
.roundabout-in-focus.next(){
font-size:.9em;
} 


.roundabout-in-focus.prev().prev(),
.roundabout-in-focus.next().next(){
font-size:.8em;
}

.roundabout-in-focus.prev().prev().prev(),
.roundabout-in-focus.next().next().next(){
font-size:.7em;
}

Это означает, что чем дальше размер окружения в центре внимания, тем меньше размер шрифта элемента списка.

ОТВЕТЫ

Ответ 1

Каждый следующий брат может быть представлен + .roundabout-moveable-item, однако нет эквивалента для предыдущих братьев и сестер.

Поскольку вам нужно стилизовать следующий и предыдущий элементы относительно элемента, обозначенного как .roundabout-in-focus, вы не сможете сделать это, используя другие методы, такие как :not(.roundabout-in-focus). Поэтому вы не можете сделать это, используя чистый CSS.

Если вы используете jQuery, который я предполагаю на основе обозначений .prev() и .next() в вашем примере, это должно быть относительно легко выполнить.