CSS चयनकर्ता में स्पेस का क्या मतलब है? .classA.classB और .classA .classB के बीच अंतर क्या है?

104

इन दो चयनकर्ताओं के बीच क्या अंतर है?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

css css-selectors

— क्वेंटिन
स्रोत

104

.classA.classBएक तत्व को संदर्भित करता है जिसमें ए और बी दोनों वर्ग हैं ( class="classA classB"); जबकि .classA .classBएक तत्व के साथ एक तत्व से class="classB"उतरता है class="classA"।

संपादित करें: संदर्भ के लिए कल्पना: चयनकर्ता संलग्न करें (खंड 5.8.3 वर्ग चयनकर्ता देखें)

— विलीहम टटलैंड
स्रोत

43

इस तरह की एक शैली कहीं अधिक सामान्य है, और "क्लासबी" के किसी भी प्रकार के तत्व को लक्षित करेगी जो कि क्लास "क्लासए" के किसी भी प्रकार के तत्व के अंदर निहित है।

.classA .classB {
  border: 1px solid; }

यह काम करेगा, उदाहरण के लिए:

<div class="classA">
  <p class="classB">asdf</p>
</div>

यह एक, हालांकि, किसी भी प्रकार के तत्व को लक्षित करता है जो दोनों वर्ग "क्लासए" है, साथ ही साथ "क्लासबी" भी है। इस तरह की शैली कम बार देखी जाती है, लेकिन कुछ परिस्थितियों में अभी भी उपयोगी है।

.classA.classB {
  border: 1px solid; }

यह इस उदाहरण पर लागू होगा:

<p class="classA classB">asdf</p>

हालाँकि, इसका निम्नलिखित पर कोई प्रभाव नहीं पड़ेगा:

<p class="classA">fail</p>
<p class="classB">fail</p>

(ध्यान दें कि जब HTML तत्व में कई वर्ग होते हैं, तो वे रिक्त स्थान से अलग हो जाते हैं।)

1

असफल मामला दिखाना मददगार है।

— हेल 50000

-1

.classA.classBइसका अर्थ है कि दोनों वर्गों के नाम वाले तत्वों का चयन किया जाएगा, जबकि .classA .classBइसका अर्थ है कि वसीयत के classBअंदर वर्ग नाम वाले तत्व classAको ही चुना जाएगा।

— अमरनाथ विश्वकर्मा
स्रोत

2

यह सही है, लेकिन सवाल पहले ही सही ढंग से एक दशक पहले ही उत्तर दे चुका था; यह वास्तव में एक नए जवाब की जरूरत नहीं थी।

— ब्रिलियनड