एचटीएमएल में पिछले और अगले तत्व को सीएसएस नियम कैसे लागू करें?

Question

उदाहरण के लिए:

आप इस राशि:

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

सीएसएस:

.selected:previous { 
    color: red; 
} 

.selected:next { 
    color: green; 
} 

कि संभव है?

Answer 1

शुद्ध सीएसएस के साथ यह संभव नहीं है। आप अगला शैली बना सकते हैं लेकिन पिछले तत्व नहीं।

लेकिन आप सीएसएस के साथ एक चाल कर सकते हैं। कक्षा देने के बजाय चयनित आप अपने पिछले तत्व को कक्षा दे सकते हैं। इस तरह:

एचटीएमएल

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

सीएसएस

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

चेक इस http://jsfiddle.net/S5kUM/2/

Answer 2

यह जावास्क्रिप्ट के साथ किया जाना होगा।

आप jQuery का उपयोग कर रहे हैं, तो इसे इस तरह किया जा सकता है:

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

Answer 3

यह भाई चयनकर्ता कहा जाता है:

.selected + li { 
    color: red; 
} 

फिडल here

हालांकि, वहाँ के लिए कोई भाई चयनकर्ता है पिछले तत्व।

Answer 4

आप display: flex; और flex-direction: row-reverse; सूची उल्टा करने के लिए उपयोग कर सकते हैं।

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