कई वर्गों के आधार पर तत्व का चयन करें

Question

मेरे पास एक शैली नियम है जो मैं एक टैग पर लागू करना चाहता हूं जब इसकी दो कक्षाएं होती हैं। क्या जावास्क्रिप्ट के बिना यह प्रदर्शन करने का कोई तरीका है? दूसरे शब्दों में:

<li class='left ui-class-selector'>

मैं अपने शैली नियम लागू करना चाहते हैं केवल यदि liदोनों है .leftऔर .ui-class-selectorकक्षाएं लागू होता है।

Comments

css-tricks.com/multiple-class-id-selectors - डबल क्लास चयनकर्ता देखें

— Firstpostcommenter

Answer 1

आप दो वर्गों का मतलब है? चयनकर्ताओं "चेन" (उनके बीच कोई स्थान नहीं):

.class1.class2 {
    /* style here */
}

यह class1उस के साथ सभी तत्वों का चयन करता है class2।

आपके मामले में:

li.left.ui-class-selector {

}

आधिकारिक दस्तावेज: CSS2 वर्ग के चयनकर्ता ।

---

जैसा कि akamike इंटरनेट एक्सप्लोरर 6 में इस पद्धति के साथ एक समस्या को इंगित करता है जिसे आप इसे पढ़ना चाह सकते हैं: IE6 CSS में दोहरी कक्षाओं का उपयोग करें?

Comments

कृपया ध्यान दें कि IE6 इन्हें पसंद नहीं करता है, क्योंकि यह कक्षाओं की श्रृंखला नहीं पढ़ता है। यह केवल श्रृंखला के अंतिम वर्ग को देखेगा।

— akamike

यह नहीं है :) सभी प्रमुख वेबसाइटें गिर गई हैं, गिर रही हैं या निकट भविष्य में IE6 के समर्थन में छोड़ने की योजना बना रही हैं .. वही करें!

— थॉमस बोनिनी

@ ऑरेंड्री बोनीनी: हाँ मुझे पता है। ईमानदार होने के लिए मैं पहले से ही IE6 के बारे में लंबे समय तक परवाह नहीं करता। (मैंने अपनी पिछली टिप्पणी हटा दी क्योंकि मुझे दूसरा प्रश्न मिला जो इस समस्या से संबंधित है।)

— फेलिक्स क्लिंग

हाँ, आप उन्हें IE6 में बिल्कुल भी उपयोग नहीं कर सकते, केवल अपने तत्वों को स्टाइल करने के लिए लंबे समय तक मार्ग ले सकते हैं। उदाहरण के लिए, प्रत्येक वर्ग को अलग-अलग स्टाइल करना और उपयुक्त सीएसएस विशिष्टता का उपयोग करके आप जितना हो सके उतनी अच्छी तरह से ओवरराइड कर सकते हैं।

— एकमाइक

मुझे IE6 की कब्र पर नृत्य करने का शौक है। मुझे इस साल IE10 का समर्थन भी नहीं करना पड़ा है, और IE को पूरी तरह से छोड़ना क्षितिज पर है। मुझे भविष्य से प्यार है। ☺

— माइकल Scheper

Answer 2

चेन चयनकर्ता केवल कक्षाओं तक सीमित नहीं हैं, आप इसे कक्षाओं और आईडी दोनों के लिए कर सकते हैं।

कक्षाएं

.classA.classB {
/*style here*/
}

कक्षा आईडी

.classA#idB {
/*style here*/
}

मैंने किया

#idA#idB {
/*style here*/
}

IE 6 को छोड़कर सभी अच्छे वर्तमान ब्राउज़र इसका समर्थन करते हैं, यह सूची में अंतिम चयनकर्ता के आधार पर चयन करता है। तो ".classA.classB" सिर्फ ".classB" के आधार पर चयन करेगा।

आपके मामले के लिए

li.left.ui-class-selector {
/*style here*/
}

या

.left.ui-class-selector {
/*style here*/
}

Comments

Id & Id एक वैचारिक रूप से अजीब चयनकर्ता है।

— फेलिक्स गगनोन-ग्रेनियर

Answer 3

आप इन समाधानों का उपयोग कर सकते हैं:

सीएसएस नियम उन सभी टैगों पर लागू होते हैं जिनमें निम्नलिखित दो वर्ग हैं:

.left.ui-class-selector {
    /*style here*/
}

सीएसएस नियम उन सभी टैगों पर लागू होते हैं <li>जो निम्नलिखित दो वर्गों के साथ हैं:

li.left.ui-class-selector {
   /*style here*/
}

jQuery समाधान:

$("li.left.ui-class-selector").css("color", "red");

जावास्क्रिप्ट समाधान:

document.querySelector("li.left.ui-class-selector").style.color = "red";