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

Question

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

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

Это означает, что чем дальше.roundabout-in-focus, тем меньше размер шрифта элемента списка.

Answer 1

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

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

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