CSS selector for next and previous elements [dupli

问题:

This question already has an answer here:

• Is there a “previous sibling” selector? 15 answers

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.

回答1:

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.