CSS में कई क्लास में कॉमा और स्पेस का क्या मतलब है?

Question

यहाँ एक उदाहरण है जो मुझे समझ में नहीं आता है:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

यह मुझे लगता है कि width: 460pxउपर्युक्त सभी वर्गों पर लागू होता है। लेकिन क्यों कुछ वर्गों को अल्पविराम ( ,) से अलग किया जाता है , और कुछ को केवल एक स्थान से?

मुझे लगता है कि width: 460pxयह केवल उन तत्वों पर लागू होगा जो सीएसएस फ़ाइल में वर्णित तरीके से कक्षाओं को जोड़ते हैं। उदाहरण के लिए, इसे लागू किया जाएगा, <div class='container_12 grid_6'>लेकिन इसे लागू नहीं किया जाएगा <div class='container_12'>। क्या यह धारणा सही है?

Comments

मुझे पता है कि यह आपके प्रश्न का उत्तर नहीं देता है, लेकिन मैं SASS की कोशिश करने के लिए एक सिफारिश की पेशकश करना चाहूंगा। ऐसा लगता है कि आप वर्ग नामों पर विचार करते हुए एक टन डुप्लिकेट सीएसएस का उपयोग करने जा रहे हैं।

— चक कैलेब्स

@Roman वहाँ भी हो सकता है .container_12 .grid_6.line `नोटिस, ग्रिड_6 और लाइन के बीच कोई स्थान नहीं; इसका तात्पर्य है कि तत्व में ग्रिड_6 और रेखाएँ दोनों वर्ग होने चाहिए। और यह 'कंटेनर' का बच्चा होना चाहिए, जैसा कि @Sampon ने स्वीकार किए गए उत्तर में बताया है :)

— पाउलो

Answer 1

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

वह कहता है "सभी .grid_6 के भीतर .container_12 के और सभी .grid_8 के भीतर .container_16 के 460 पिक्सेल चौड़े करें।" तो निम्नलिखित में से दोनों समान होंगे:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

अल्पविराम के लिए, यह एक नियम को कई वर्गों में लागू कर रहा है, जैसे।

.blueCheese, .blueBike {
  color:blue;
}

यह कार्यात्मक रूप से इसके बराबर है:

.blueCheese { color:blue }
.blueBike { color:blue }

लेकिन वाचालता में कटौती करता है।

Comments

मैं समझता हूं कि हम एक नियम को कोमा से अलग कई वर्गों पर लागू कर सकते हैं। यह मेरे लिए स्पष्ट नहीं है कि उदाहरण में कुछ कक्षाएं अल्पविराम से अलग क्यों नहीं की जाती हैं।

— रोमन

जब वे एक स्थान से अलग हो जाते हैं, तो यह एक घोंसले के शिकार का मुद्दा है। बाद वाले पूर्व के भीतर पाए जाते हैं। तो .container_12 .grid_6केवल .grid_6वस्तुओं के भीतर पाई जाने वाली .container_12वस्तुओं को संबोधित कर रहा है ।

— सैमप्सन

Answer 2

.container_12 .grid_6 { ... }

यह नियम वर्ग के साथ एक DOM नोड के साथ मेल खाता है जिसमें वर्ग के साथ container_12एक वंशज (जरूरी नहीं कि एक बच्चा) हो grid_6, और वर्ग के साथ DOM तत्व के CSS नियम लागू होते हैं grid_6।

.container_12 > .grid_6 { ... }

लाना >उन दोनों के बीच का कहना है कि grid_6नोड वर्ग के साथ नोड का एक सीधा बच्चा होना चाहिए container_12।

.container_12, .grid_6 { ... }

एक अल्पविराम, जैसा कि दूसरों ने कहा है, एक समय में कई अलग-अलग नोड्स में नियमों को लागू करने का एक तरीका है। इस मामले में, नियम किसी भी वर्ग के लिए container_12या उसके साथ किसी भी नोड पर लागू होते हैं grid_6।

Comments

अन्य ने कहा और नहीं?

— किक बटोस्की

महान जवाब मुझे यह तथ्य पसंद है कि यह वर्गों <space>और >आईडी के बीच के अंतर को बताता है ।

— एलेक्स लोव

Answer 3

बिल्कुल नहीं जो पूछा गया था, लेकिन शायद यह मदद करेगा।

किसी तत्व को एक शैली लागू करने के लिए केवल अगर उसमें दोनों वर्ग हैं तो आपके चयनकर्ता को कक्षा के नामों के बीच कोई स्थान नहीं इस्तेमाल करना चाहिए।

उदाहरण के लिए:

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>

Answer 4

कॉमा कक्षाओं को समूहीकृत करता है (उन सभी के लिए समान शैली लागू करता है), एक खाली स्थान बताता है कि निम्नलिखित चयनकर्ता को पहले चयनकर्ता के भीतर होना चाहिए।

इसलिये

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

उस शैली को केवल उस वर्ग पर लागू करता है .grid_6जो .container_12कक्षा के भीतर और .grid_8कक्षा के भीतर होता है .container_16।

Answer 5

width: 460px;साथ तत्व को लागू किया जाएगा .grid_8वर्ग, निहित अंदर के साथ तत्वों .container_16वर्ग, और साथ तत्वों .grid_6वर्ग, निहित अंदर के साथ तत्वों .container_12।

अंतरिक्ष का अर्थ है विरासत, और अल्पविराम का अर्थ है 'और'। यदि आप एक चयनकर्ता के साथ गुण रखते हैं
.class-a, .class-b, जैसे आपके पास दो वर्गों में से किसी के साथ तत्वों पर लागू गुण होंगे।

आशा है कि मैंने मदद की है।

Answer 6

आपके पास अपने उदाहरण में चार वर्ग और दो चयनकर्ता हैं:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

इसलिए .container_12और .grid_6दोनों वर्ग हैं, लेकिन नियम width: 460pxकेवल उन तत्वों पर लागू होगा जिनके पास .grid_6वर्ग है जो वर्ग के तत्व के वंशज हैं .container_16।

उदाहरण के लिए:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>

Answer 7

उपरोक्त का अर्थ है कि आप दो वर्गों के लिए शैलियों को लागू कर रहे हैं, जो अल्पविराम द्वारा इंगित किए गए हैं।

जब आप दो तत्वों को अलग-अलग देखते हैं, तो आप यह मान सकते हैं कि यह एक क्षेत्र के भीतर एक क्षेत्र की बात कर रहा है। तो ऊपर में, यह शैली केवल कंटेनर_12 वर्गों के अंदर ग्रिड_6 वर्गों और कंटेनर_16 कक्षाओं के अंदर ग्रिड_8 कक्षाओं पर लागू होती है।

उदाहरण में:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

पहला ग्रिड_6 प्रभावित नहीं होगा जबकि दूसरा ग्रिड_6 वर्ग क्योंकि यह एक कंटेनर_12 के अंदर समाहित है।

जैसा कथन

#admin .description p { font-weight:bold; }

केवल बोल्ड को लागू करेगा

उन क्षेत्रों के भीतर टैग जिनमें कक्षा "विवरण" है जो आईडी "व्यवस्थापक" के साथ एक क्षेत्र के अंदर हैं, जैसे:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

Comments

यह वास्तव में मदद करता है! विशेष रूप से # के उदाहरण के बाद एक '।'

— शाओ-कुई

Answer 8

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460pxकेवल .grid_6और के लिए लागू किया जाएगा.grid_8

संपादित करें: यहां आपके लिए एक बहुत अच्छा लेख है

http://css-tricks.com/multiple-class-id-selectors/

Comments

सिर्फ अगर .grid_6और .grid_8एक के भीतर बसता था .container_12या.container_16

— sshow

@ शशो - धन्यवाद। आप सही हैं लेकिन यह एक HTML मुद्दा है। इस css कोड के अनुसार मेरा उत्तर सही है

— जितेंद्र व्यास

Answer 9

चयनकर्ताओं के संयोजन अलग अर्थ प्राप्त करते हैं - संलग्न छवि आसानी से बताती है

a) एकाधिक चयनकर्ताओं को अल्पविराम द्वारा अलग किया गया ( ,) - सभी चयनित तत्वों पर समान शैलियाँ लागू होती हैं।

div,.elmnt-color {
  border: 1px solid red;
}

यहां बॉर्डर स्टाइल को DIVएलिमेंट्स और सीएसएस क्लास .elmnt-colorएप्लाइड एलिमेंट्स पर लागू किया जाता है।

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) अंतरिक्ष द्वारा अलग-अलग चयनकर्ता - जिन्हें वंशज चयनकर्ता कहा जाता है।

div .elmnt-color {
  background-color: red;
}

यहां सीएसएस शैली को सीएसएस वर्ग .elmnt-colorलागू तत्वों पर लागू किया जाता है जो एक तत्व के बालDIV तत्व हैं।

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

ग) अंतरिक्ष के बिना निर्दिष्ट कई चयनकर्ता - यहां शैलियों को उन तत्वों पर लागू किया जाता है जो सभी संयोजनों को पूरा करते हैं।

div.elmnt-color {
  border: 1px solid red;
}

यहां बॉर्डर स्टाइल केवल उन DIVतत्वों के लिए लागू किया जाता है जिनकी CSS क्लास है .elmnt-color।

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

विवरण https://www.csssolid.com/css-tips.html पर संलग्न हैं

नोट: CSS क्लास CSS चयनकर्ताओं में से एक है। ये नियम सभी CSS चयनकर्ताओं (उदा: वर्ग, तत्व, आईडी आदि) पर लागू होते हैं।