সিএসএসে একাধিক ক্লাসে কমা এবং স্পেস বলতে কী বোঝায়?

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 চেষ্টা করার জন্য একটি সুপারিশ দিতে চাই। দেখে মনে হচ্ছে আপনার ক্লাসের নামগুলি বিবেচনা করে এক টন ডুপ্লিকেট সিএসএস লাগবে।

— চক কল্লেবস

@ রোমন সেখানে `.container_12 .grid_6.line` বিজ্ঞপ্তি দেখুন, গ্রিড_6 এবং লাইনের মধ্যে কোনও স্থান নেই; এর দ্বারা বোঝা যায় যে উপাদানটির ক্লাস হিসাবে গ্রিড_6 এবং রেখা উভয়ই হওয়া উচিত। এবং এটি 'পাত্রে' বাচ্চা হওয়া উচিত, যেমন @ স্যাম্পসন গৃহীত উত্তরে উল্লেখ করেছেন :)

— পাওলো

Answer 1

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

এতে বলা হয়েছে "সমস্ত .গ্রিড_6 এর .Container_12 এর মধ্যে এবং সমস্ত .গ্রিড_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 { ... }

এই নিয়মটি ক্লাসের সাথে container_12বংশধর (অগত্যা কোনও শিশু নয়) শ্রেণীর সাথে একটি ডোম নোডের সাথে মেলে grid_6এবং ক্লাস সহ ডোম উপাদানটিতে সিএসএস বিধি প্রয়োগ করে 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।

স্থান মানে heritageতিহ্য, এবং কমা অর্থ 'এবং'। আপনি যদি কোনও নির্বাচকের মতো বৈশিষ্ট্যগুলি রাখেন তবে আপনার
.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 কার্যকর হবে না যখন দ্বিতীয় গ্রিড__ শ্রেণি হবে কারণ এটি একটি ধারক_12 এর মধ্যে রয়েছে।

মত একটি বিবৃতি

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

শুধুমাত্র গা the় প্রয়োগ করতে হবে

"প্রশাসনিক" আইডি সহ কোনও অঞ্চলের অভ্যন্তরে শ্রেণিবদ্ধ "বর্ননা" রয়েছে এমন অঞ্চলের মধ্যে ট্যাগগুলি যেমন:

<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/m Multiple-class-id-selectors/

Comments

শুধু যদি .grid_6& .grid_8একটি মধ্যে থাকা .container_12বা.container_16

— sshow

@ শো - ধন্যবাদ আপনি ঠিক বলেছেন তবে এটি একটি HTML সমস্যা। এই CSS কোড অনুসারে আমার উত্তর সঠিক

— জিতেন্দ্র ব্যাস

Answer 9

নির্বাচক সংমিশ্রণগুলি বিভিন্ন অর্থ পায় - সংযুক্ত চিত্রটি সহজে ব্যাখ্যা করে

ক) একাধিক নির্বাচক একটি কমা দ্বারা পৃথক ( ,) - একই শৈলী সমস্ত নির্বাচিত উপাদান প্রয়োগ করা হয়।

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>

খ) একাধিক নির্বাচককে স্থান দ্বারা পৃথক করা - তাদের বলা হয় বংশধর নির্বাচক।

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 এ সংযুক্ত রয়েছে

দ্রষ্টব্য: সিএসএস ক্লাস সিএসএস নির্বাচনকারীদের মধ্যে একটি মাত্র। এই বিধিগুলি সমস্ত সিএসএস নির্বাচনকারীদের ক্ষেত্রে প্রযোজ্য (উদা: শ্রেণি, উপাদান, আইডি ইত্যাদি)।