एक नियम के भीतर, कई वर्गों के साथ लक्षित तत्व

Question

मेरे पास कुछ HTML हैं जिनमें कई वर्गों के साथ तत्व होंगे, और मुझे उन्हें एक नियम के भीतर असाइन करने की आवश्यकता है, ताकि एक ही वर्ग अलग-अलग कंटेनरों से अलग हो सके। कहो मैं अपने सीएसएस में यह है:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

फिर मेरे HTML में यह है:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

क्या मैं इन्हें एक नियम के भीतर लक्षित कर सकता हूं? इस तरह, उदाहरण के लिए, जो मुझे पता है कि काम नहीं करता है:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

Answer 1

.border-blue.background { ... }कई वर्गों के साथ एक आइटम के लिए है।
.border-blue, .background { ... }अपने स्वयं के वर्ग के साथ प्रत्येक के लिए कई मदों के लिए है।
.border-blue .background { ... }एक आइटम के लिए है जहां '.background' '.border-blue' का बच्चा है।

अधिक गहन स्पष्टीकरण के लिए क्रिस का उत्तर देखें ।

Comments

धन्यवाद! मुझे नहीं पता था कि क्या यह संभव है, इसलिए मैं यहां पता लगाने के लिए कह रहा था।

— टान्नर ओटिंगर

यह समाधान मेरे लिए काम नहीं करता (या अब काम नहीं करता ...)।

— फ्रेस्को

आपको क्लासेस को कॉमा द्वारा अलग करने की आवश्यकता है, जैसा कि क्रिस का जवाब बताता है

— फ्रेस्को

आपका क्या मतलब .border-blue .background { ... }है बच्चा है? मैंने यह कोशिश की और यह काम नहीं करता है

— एलियाव लूसकी

Answer 2

बस अगर किसी ने इस तरह ठोकर खाई जैसे मैंने किया और महसूस नहीं किया, तो उपरोक्त दो भिन्नताएँ विभिन्न उपयोग के मामलों के लिए हैं।

निम्नलिखित:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

उदाहरण के लिए, आप उन तत्वों में शैलियों को जोड़ना चाहते हैं जिनमें या तो ब्लू-बॉर्डर या पृष्ठभूमि वर्ग है:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

सभी को एक नीले रंग की सीमा और सफेद पृष्ठभूमि मिल जाएगी।

हालाँकि, स्वीकृत उत्तर अलग है।

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

यह उन शैलियों पर लागू होता है, जिनमें दोनों वर्ग होते हैं इसलिए इस उदाहरण में <div>दोनों वर्गों के साथ ही उन शैलियों को लागू किया जाना चाहिए (ब्राउज़रों में जो सीएसएस की व्याख्या करते हैं):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

तो मूल रूप से इस तरह से सोचते हैं, अल्पविराम अलग करना एक वर्ग या अन्य वर्ग के तत्वों पर लागू होता है और एक वर्ग और दूसरे वर्ग के साथ तत्वों पर डॉट अलग करना लागू होता है ।

Comments

यह एक बहुत ही उपयोगी उत्तर था जो मैंने लगभग नहीं पढ़ा था। चीयर्स!

— Psicopoo

बस थोड़ा सावधान रहें। इसमें कोई स्थान नहीं है.blue-border.background

— Knu8

think of it as AND and OR: अच्छी सलाह। मुझे .x .yलगता है कि के रूप में सोचा जा सकता है जोड़ सकते हैंy && ancestors.has(x)

— सिद्धार्थ गर्ग