Idea of a basic LoopingSelector in CSS, HTML I'm a programmer who is no skills at design. I know Basic CSS3 but i'm better in JavaScript.
My question is I need to do a basic LoopingSelector.
 
Basic idea is there is a selected value on middle of screen and up and down value is increasing and decreasing. May be I can do that in JavaScript but there is will be performance issue and responsive issue I think. So I want to do it with CSS. I have problem with the selectors right know. I have no clue how to be. So I need a guide about it if somebody can help me.
Thanks.
Edit:
CSS
    .vote {
list-style: none;
    }

.vote li {
display: none;
padding: 10px;
border: 1px solid black;
}

.vote .selected {
display: inline;
}

/*It must show 2 items after the selected class */
.vote li.selected:nth-child(n + 2) {
display: inline;
}

/*It must show 2 items before the selected class */
.vote li.selected:nth-child(-n + 2) {
display: inline;
}

Html
<ul class="vote">

    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="selected">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>

</ul>


You cant use nth-child here because n is not the current element. Its a counter which counts from 0 to N. So when you write nth-child(3n) every third child gets the style applied.
However for you problem you could use selector1 + selector2 to style elements which are siblings after selector1. But you cant access elements before
li.selected + li + li{
    /* 2 li later */
}