jak zastosować regułę css do poprzedniego i następnego elementu w HTML?

Question

Na przykład:

Trzeba to:

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

To możliwe?

Answer 1

Nie jest to możliwe z czystym css. Możesz stylować następny, ale nie poprzedni element.

Ale możesz zrobić lewę z css. Zamiast dać klasę wybraną możesz dać klasę swojemu poprzednim elementowi. Tak:

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

Sprawdź tej http://jsfiddle.net/S5kUM/2/

Answer 2

Należy to zrobić za pomocą JavaScript.

Jeśli używasz jQuery, można to zrobić tak:

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

Answer 3

Nazywa selektor rodzeństwa:

.selected + li { 
    color: red; 
} 

Fiddle here

Jednak nie ma selektor rodzeństwa dla poprzedni element.

Answer 4

Można użyć display: flex; i flex-direction: row-reverse; odwrócić listę.

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