CSS चयनकर्ता जो दो वर्गों के साथ तत्वों पर लागू होता है

Question

क्या क्लास विशेषता के मूल्य के आधार पर सीएसएस के साथ एक तत्व का चयन करने का एक तरीका दो विशिष्ट वर्गों के लिए सेट किया जा रहा है। उदाहरण के लिए, मान लें कि मेरे पास 3 divs हैं:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

सीएसएस मुझे सूची में केवल दूसरे तत्व का चयन करने के लिए लिख सकता है, इस तथ्य के आधार पर कि यह दोनों फू और बार वर्गों का सदस्य है?

Answer 1

दोनों वर्ग चयनकर्ताओं (बीच में जगह के बिना):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

---

यदि आपको अभी भी IE6 जैसे प्राचीन ब्राउज़रों से निपटना है, तो ध्यान रखें कि यह सही ढंग से जंजीर वर्ग चयनकर्ताओं को नहीं पढ़ता है: यह केवल अंतिम वर्ग चयनकर्ता को पढ़ेगा ( .barइस मामले में), इसके बजाय कि आप अन्य वर्गों की सूची बनाते हैं।

यह समझने के लिए कि अन्य ब्राउज़र और IE6 इसकी व्याख्या कैसे करते हैं, इस CSS पर विचार करें:

* {
    color: black;
}

.foo.bar {
    color: red;
}

समर्थित ब्राउज़रों पर आउटपुट है:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

IE6 पर आउटपुट है:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

फुटनोट:

• समर्थित ब्राउज़र:
  1. इस तत्व के रूप में चयनित नहीं है केवल वर्ग है foo।
  2. इस तत्व के रूप में चयनित दोनों वर्गों fooऔर है bar।
  3. इस तत्व के रूप में चयनित नहीं है केवल वर्ग है bar।
     
     
• IE6:
  1. इस तत्व को चयनित नहीं किया गया क्योंकि इसमें कक्षा नहीं है bar।
  2. इस तत्व के रूप में चयनितbar वर्ग में सूचीबद्ध अन्य वर्गों की परवाह किए बिना।

Comments

क्या इससे कोई फर्क पड़ता है कि मैंने उन्हें किस क्रम में रखा?

— एडम

इससे कोई फर्क नहीं पड़ता। (यह है क्योंकि यह है कि यह कैसे की व्याख्या, यह मानते हुए कि आप इसे समर्थन करना चाहिए की IE6 के लिए करता है।)

— BoltClock

क्या यह मायने रखता है कि उनके बीच कोई जगह नहीं है?

— कोडीबस्टीन

@ आईरे: हां, अंतरिक्ष एक वंशज चयनकर्ता का प्रतिनिधित्व करता है, जो प्रत्येक वर्ग चयनकर्ता को एक अलग तत्व का प्रतिनिधित्व करेगा। लेकिन हम यहां एक एकल तत्व के बारे में बात कर रहे हैं।

— BoltClock

@ डेविड ब्रैडार्ड: हाँ, यह करता है।

— BoltClock