cómo aplicar la regla css al elemento anterior y al siguiente en HTML?

Question

Por ejemplo:

Tiene esto:

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

eso es posible?

Answer 1

No es posible con css puro. Puede diseñar el siguiente elemento, pero no el anterior.

Pero puedes hacer un truco con css. En lugar de dar la clase seleccionada puede dar clase a su elemento anterior. De esta manera:

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

Marque esta http://jsfiddle.net/S5kUM/2/

Answer 2

Esto debería hacerse con JavaScript.

Si está utilizando jQuery, se puede hacer así:

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

Answer 3

Se llama hermanos de selección:

.selected + li { 
    color: red; 
} 

violín here

Sin embargo, no hay ningún selector de hermanos de el elemento anterior.

Answer 4

Puede utilizar display: flex; y flex-direction: row-reverse; para revertir la lista.

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