CSS selector for next and previous elements

Question

How do I target the list element individually, for example I would like to make:

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

That means the further away the .roundabout-in-focus, the smaller the list element's font size.

score 3 · Accepted Answer · edited May 23 '17 at 10:32

Every next sibling can be represented with a + .roundabout-moveable-item, however there is no equivalent for previous siblings.

As you need to style the next and previous elements relative to the element being designated as .roundabout-in-focus, you will not be able to do this using other techniques such as :not(.roundabout-in-focus). Therefore you can't do this using pure CSS.

If you're using jQuery, which I'm assuming based on the .prev() and .next() notations in your example, this should be relatively easy to accomplish.

CSS selector for next and previous elements

1 Answers1

Linked