एक निश्चित वर्ग

Question

तक पहुँचने मैं जैसे एक बिना क्रम वाली सूची के अंदर सूची टैग के एक समूह से पहले HTML टैग के एक समूह को सीएसएस लागू करें:

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="active">4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

वहाँ लक्षित करने के लिए एक रास्ता है सीएसएस के माध्यम से सक्रिय कक्षा से पहले या बाद में सभी सूची तत्व?

Answer 1

आप ~

li.active ~ li 
{ 
    color: green; 
} 

JSFiddle

---

सीएसएस के साथ भाई तत्वों के बाद के सभी लक्षित कर सकते हैं, आप एक तत्व से पहले भाई बहन लक्षित नहीं कर सकते तो आपको बस इतना करना होगा इस तरह कुछ:

उन्हें सभी नियम दें:

li 
{ 
    color: orange; 
} 

फिर सक्रिय एक

li.active 
{ 
    color: red; 
} 

फिर बाद

li.active ~ li 
{ 
    color: green; 
} 

JSFiddle

Answer 2

अधिलेखित अधिलेखित बस इसे बाहर बात करने के लिए, एक और तरीका हो सकता है:

li:not(.active) { 
    /* your css rules here */ 
} 

यह प्रत्येक li का चयन करेगा, जिसमें कक्षा .active