CSS चयनकर्ता में विशेष वर्ग के नाम को बाहर कैसे करें?

Question

जब उपयोगकर्ता माउस उस तत्व को मँडराता है जिसकी कक्षा का नाम है, तो मैं पृष्ठभूमि-रंग लागू करने का प्रयास कर रहा हूँ "reMode_hover"।

लेकिन अगर तत्व भी है तो मैं रंग बदलना नहीं चाहता"reMode_selected"

नोट: मैं केवल CSS नहीं जावास्क्रिप्ट का उपयोग कर सकता हूं क्योंकि मैं कुछ प्रकार के सीमित वातावरण में काम कर रहा हूं।

स्पष्ट करने के लिए, मेरा लक्ष्य होवर पर पहले तत्व को रंगना है लेकिन दूसरे तत्व को नहीं।

एचटीएमएल

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

मैंने नीचे यह कोशिश की कि पहली परिभाषा काम करेगी लेकिन यह नहीं है। मैं क्या गलत कर रहा हूं?

सीएसएस

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Answer 1

एक तरीका कई वर्ग चयनकर्ता का उपयोग करना है (कोई स्थान नहीं है जो कि वंशज चयनकर्ता है):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Comments

ऐसा नहीं होना चाहिए: .reMode_hover: नहीं ('। reMode_selected'): होवर मेरे अनुभव में वे उद्धरण आवश्यक हैं।

— माकन तैयबी

@MakanTayebi आप चयनकर्ता के आसपास उद्धरणों के बारे में एक उत्कृष्ट बिंदु उठाते हैं। TL; DR: उनका उपयोग करना वास्तव में सबसे अच्छा है। पर विस्तृत विवरण stackoverflow.com/a/5578880/1772379 ।

— बेन जॉनसन

क्या ये अब भी एक मामला है? अन्य ब्राउज़र में इसकी कोशिश नहीं की गई है, लेकिन फ़ायरफ़ॉक्स के नवीनतम संस्करण में, जिसमें मैं काम कर रहा हूं, :notचयनकर्ता ने केवल तभी काम किया जब मैंने उद्धरण हटा दिए।

— एलेक्स रममेल

Answer 2

आधुनिक ब्राउज़रों में आप कर सकते हैं:

.reMode_hover:not(.reMode_selected):hover{}

संगतता जानकारी के लिए http://caniuse.com/css-sel3 से परामर्श करें ।

Answer 3

विधि 1

आपके कोड के साथ समस्या यह है कि आप उस का चयन कर रहे हैं .remode_hoverजिसका एक वंशज है .remode_selected। तो आपके कोड को सही ढंग से काम करने का पहला हिस्सा उस स्थान को हटाकर है

.reMode_selected.reMode_hover:hover

फिर, शैली को काम नहीं करने के लिए, आपको स्टाइल सेट को ओवरराइड करना होगा :hover। दूसरे शब्दों में, आपको background-colorसंपत्ति का मुकाबला करने की आवश्यकता है । तो अंतिम कोड होगा

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

बेला

विधि 2

एक वैकल्पिक विधि का उपयोग करना होगा :not(), जैसा कि दूसरों द्वारा कहा गया है। यह किसी भी तत्व को वापस कर देगा जिसमें कोष्ठक के अंदर बताई गई कक्षा या संपत्ति नहीं है। इस मामले में, आप .remode_selectedवहाँ डाल देंगे । यह उन सभी तत्वों को लक्षित करेगा जिनके पास कक्षा नहीं है.remode_selected

बेला

हालाँकि, मैं इस पद्धति की अनुशंसा नहीं करूंगा, क्योंकि यह सीएसएस 3 में पेश किया गया था, इसलिए ब्राउज़र समर्थन आदर्श नहीं है।

विधि 3

एक तीसरा तरीका jQuery का उपयोग होगा। आप .not()चयनकर्ता को लक्षित कर सकते हैं , जो :not()सीएसएस में उपयोग करने के समान होगा , लेकिन बहुत बेहतर ब्राउज़र समर्थन के साथ

बेला

Comments

आपको अपना "मेथड 3" निकालना चाहिए जिसमें ओपी विशेष रूप से एक समाधान के लिए "जावास्क्रिप्ट नहीं" कहा गया है।

— स्कॉट्स