come applicare la regola css al precedente e al successivo elemento in HTML?

Question

Per esempio:

Hai questo:

<ul> 
<li>zero</li> 
<li>one</li> 
<li class="selected">two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS:

.selected:previous { 
    color: red; 
} 

.selected:next { 
    color: green; 
} 

che sia possibile?

Answer 1

Non è possibile con puro css. Puoi disegnare l'elemento successivo ma non precedente.

Ma puoi fare un trucco con css. Invece di dare la classe selezionata puoi dare classe al tuo elemento precedente. Come questo:

HTML

<ul> 
<li>zero</li> 
<li class="previous">one</li> 
<li>two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS

.previous{ 
    color: green; 
} 
.previous + li{ 
    color: red; 
} 
.previous + li + li{ 
    color:yellow; 
} 

Scegli questa http://jsfiddle.net/S5kUM/2/

Answer 2

Questo dovrebbe essere fatto con JavaScript.

Se si utilizza jQuery, si può fare in questo modo:

$('.selected').prev().css('color', 'red'); 
$('.selected').next().css('color', 'green'); 

Answer 3

Si chiama selettore fratello:

.selected + li { 
    color: red; 
} 

Fiddle here

Tuttavia, non v'è alcun selettore fratello per l'elemento precedente.

Answer 4

È possibile utilizzare display: flex; e flex-direction: row-reverse; per invertire la lista.

http://codepen.io/bscherer/pen/XMgpbb