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

Question

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

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

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

Answer 1

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

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

---

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

कैसे अन्य ब्राउज़रों उदाहरण देकर स्पष्ट करने और IE6 इस व्याख्या, इस सीएसएस पर विचार करें:

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

समर्थित ब्राउज़र पर आउटपुट है: 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>  <!-- Not selected, black text [3] --> 

आउटपुट है:

<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 है, चाहे सूचीबद्ध किसी भी अन्य वर्ग के बावजूद।