क्या आप सीएसएस के साथ एक तत्व को लक्षित कर सकते हैं यदि 2 कक्षाएं मौजूद हैं?

Question

जैसा कि आप शायद पहले से ही जानते हैं, आपके पास अंतरिक्ष द्वारा अलग किए गए तत्वों पर कई कक्षाएं हो सकती हैं।

उदाहरण

<div class="content main"></div>

और सीएसएस के साथ आप लक्ष्य कर सकते हैं कि या divतो । क्या इसे लक्षित करने का एक तरीका है यदि और केवल यदि दोनों वर्ग मौजूद हैं?.content.main

उदाहरण

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

मैं कौन सा CSS चयनकर्ता पहले प्राप्त करने के लिए उपयोग करूँगा div(मान लें कि मैं उपयोग नहीं कर सकता .content:first-childया समान)?

Answer 1

हां, बस उन्हें संक्षिप्त करें .content.main:। सीएसएस वर्ग चयनकर्ता देखें ।

लेकिन ध्यान दें कि संस्करण 6 तक इंटरनेट एक्सप्लोरर कई वर्ग चयनकर्ताओं का समर्थन नहीं करता है और सिर्फ अंतिम वर्ग के नाम का सम्मान करता है।

Comments

जब तक वह IE6 :) के 'ऊपर' और 'समावेशी' नहीं है

— एलेक्स

नहीं, IE6 सही ढंग से जंजीर सीएसएस चयनकर्ताओं को नहीं समझता है। यह नियम वर्ग = "मुख्य" के साथ सभी तत्वों पर लागू होगा चाहे वे कक्षा = "सामग्री" भी हों

— गैरेथ

: IE6 के लिए एक उदाहरण किसी के लिए बनाम अन्य ब्राउज़र कौन परवाह करता है stackoverflow.com/questions/3772290/...

— BoltClock

Answer 2

बस इसके लिए (मैं वास्तव में आपको ऐसा करने की सलाह नहीं देता), इसे करने का एक और तरीका है:

.content[class~="main"] {}

या:

.main[class~="content"] {}

संदर्भ: http://www.w3.org/TR/CSS2/selector.html

ई [foo ~ = "चेतावनी"] किसी भी ई तत्व से मेल खाता है जिसका "फू" विशेषता मान अंतरिक्ष-पृथक मानों की एक सूची है , जिनमें से एक "चेतावनी" के बराबर है

डेमो: http://jsfiddle.net/eXrSg/

यह वास्तव में उपयोगी क्यों है (IE6 के लिए कम से कम):

चूंकि IE6 कई वर्गों का समर्थन नहीं करता है, इसलिए हम उपयोग नहीं कर सकते हैं .content.main, लेकिन IE-7.js जैसी कुछ जावास्क्रिप्ट लाइब्रेरी हैं जो विशेषता चयनकर्ता को सक्षम करती हैं, लेकिन कई कक्षाओं में आने पर अभी भी विफल लगती हैं। मैंने IE6 में इस वर्कअराउंड का परीक्षण जावास्क्रिप्ट के साथ किया है जो विशेषता चयनकर्ता को सक्षम करता है, और यह बदसूरत है, लेकिन यह काम करता है।

मुझे अभी तक एक स्क्रिप्ट मिल गई है जो IE6 को कई वर्ग चयनकर्ताओं का समर्थन करती है लेकिन कई ऐसे हैं जिन्होंने विशेषता चयनकर्ताओं को सक्षम किया है। अगर किसी को पता है कि काम करता है , तो कृपया मुझे टिप्पणियों में चिल्लाओ, ताकि मैं इस काम से छुटकारा पा सकूं।