কেবলমাত্র প্রথম প্রত্যক্ষ সন্তানের জন্য কি সিএসএস নির্বাচক রয়েছে?

Question

আমি নিম্নলিখিত এইচটিএমএল আছে

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

এবং নিম্নলিখিত শৈলী:

DIV.section DIV:first-child 
{
  ...
}

কিছু কারণে আমি বুঝতে পারি না যে শৈলীটি "সাব উপকরণ 1" এর <div> পাশাপাশি "শিরোনাম" এ প্রয়োগ হচ্ছে <div>।

আমি ভেবেছিলাম যে স্টাইলের নির্বাচক কেবলমাত্র "বিভাগ" নামে একটি শ্রেণীর সাথে একটি ডিভের প্রথম সরাসরি সন্তানের জন্য প্রযোজ্য। আমি যা চাই তা পেতে আমি কীভাবে নির্বাচককে পরিবর্তন করতে পারি?

Comments

jsfiddle.net/joelpurra/7t5CK

— জোয়েল পুররা

Answer 1

আপনি যা আক্ষরিক পোস্ট করেছেন তার অর্থ "যে কোনও ডিভগুলি সেকশন ডিভের ভিতরে রয়েছে এবং তাদের পিতামাতার প্রথম সন্তান Find" সাবটিতে একটি ট্যাগ রয়েছে যা বর্ণনার সাথে মেলে।

আপনি মূল ডিভের উভয় সন্তানই চান কিনা তা আমার কাছে অস্পষ্ট। যদি তা হয় তবে এটি ব্যবহার করুন:

div.section > div

আপনি যদি কেবল শিরোনাম চান তবে এটি ব্যবহার করুন:

div.section > div:first-child

>পরিবর্তনগুলি বর্ণনায় পরিবর্তনটি ব্যবহার করে : "বিভাগের প্রত্যক্ষ বংশধর এমন কোনও ডিভগুলি সন্ধান করুন" যা আপনি চান।

দয়া করে নোট করুন যে সমস্ত বড় ব্রাউজারগুলি আই 6 বাদে এই পদ্ধতিটিকে সমর্থন করে। যদি আই 6 সমর্থনটি মিশন-সমালোচনাযোগ্য হয় তবে আপনাকে চাইল্ড ডিভগুলিতে ক্লাস যুক্ত করতে হবে এবং পরিবর্তে এটি ব্যবহার করতে হবে। অন্যথায়, এটি যত্নশীল মূল্য নয়।

Comments

: এই ক্ষেত্রে প্রথম সন্তানের প্রয়োজন নেই।

— ইওজি

দেখে মনে হচ্ছে ওপি বাছাইকারীকে যতটা জিজ্ঞাসা করছে না যতটা নিয়মটি সমস্ত শিশু ডিভের জন্য প্রয়োগ করা হচ্ছে।

— ডগ নিনার

আমার ব্যাখ্যাটি হ'ল তিনি সিএসএস উত্তরাধিকারের ধারণাটি পেয়েছেন এবং ভেবেছিলেন যে প্রথম সন্তানের প্রভাবটি>> এর উপর পড়বে। এটি বরং অস্পষ্ট শব্দবন্ধ।

— ম্যাচু

আহ, যথেষ্ট বয়স্ক হওয়ার আনন্দ যখন 'প্রত্যক্ষ বংশধর' নির্বাচক আপনার সমস্ত সমস্যার সমাধান করতে পারে তা মনে রাখতে পারে তবে আপনি এটি ব্যবহার করতে পারবেন না কারণ এটি আইই তে কাজ করে না । তখন অনেক অপ্রয়োজনীয় হতাশার কারণ হতে পারে।

— আরথ

এটি ফার্স সন্তানের প্রথম সন্তানের ক্ষেত্রেও প্রযোজ্য। প্রথম সন্তানের উপর যদি সত্যিই পরিবর্তনগুলি প্রয়োগ করার প্রয়োজন হয় তবে আমাদের সন্তানের বাচ্চার পরিবর্তনগুলি বাতিল করতে হবে। এরকম কিছু:div.section > div:first-child > div { /* Cancel Changes*/}

— মাহদী জে.আনসারি

Answer 2

গুগলে অনুসন্ধান করে এই প্রশ্নটি পাওয়া গেছে। এটি শ্রেণীর সাথে কোনও উপাদানের প্রথম সন্তানকে ফিরিয়ে দেবে, শিশু containerকী ধরণের তা নির্বিশেষে।

.container > *:first-child
{
}

Answer 3

সিএসএসকে ক্যাসকেডিং স্টাইল শীট বলা হয় কারণ নিয়মগুলি উত্তরাধিকার সূত্রে প্রাপ্ত। নিম্নলিখিত নির্বাচক ব্যবহার করে, হবে পিতা বা মাতা মাত্র সরাসরি সন্তান নির্বাচন, কিন্তু তার নিয়ম করা হবে উত্তরাধিকারসূত্রে যে divএর শিশু divs:

div.section > div { color: red }

এখন, এটি div এবং তার সন্তান উভয়ই হবে red। আপনি পিতা-মাতার উপর যা কিছু সেট করেছেন তা বাতিল করতে হবে যদি আপনি তা উত্তরাধিকার সূত্রে চান না:

div.section > div { color: red }
div.section > div div { color: black }

এখন কেবলমাত্র সেই অবিবাহিতেরই divপ্রত্যক্ষ শিশু div.sectionলাল হবে তবে তার শিশুরা divsএখনও কালো থাকবে।

Answer 4

div.section > div

Answer 5

ব্যবহার div.section > div।

আরও ভাল, <h1>শিরোনামের জন্য এবং div.section h1আপনার সিএসএসে একটি ট্যাগ ব্যবহার করুন , যাতে পুরানো ব্রাউজারগুলি সমর্থন করে (যা সম্পর্কে জানা থাকে না >) এবং আপনার মার্কআপকে শব্দার্থক রাখে।

Comments

ভাল ধারণা, দুর্ভাগ্যক্রমে আমারও আই 6 সমর্থন করতে হবে এবং আমি যদি এইচ 1 ব্যবহার করি তবে আমাকে উত্তরাধিকারের জন্য ফন্টের আকার নির্ধারণ করতে হবে যাতে ফন্টটি শরীরের সাথে মেলে এবং আই 7 এবং নীচে উত্তরাধিকার সমর্থন করে না। ARG!

— জেরেমি

এছাড়াও, আমার চাইল্ড ডিভ রয়েছে এবং এইচ 1 এ চাইল্ড ডিভ লাগানো নিয়ম ভঙ্গ করে, যদিও আইই এটি রেন্ডার করে, অন্যান্য ব্রাউজারগুলি কী করে তা আমি নিশ্চিত নই

— জেরেমি

Answer 6

আপনার ক্ষেত্রে সরাসরি প্রথম সন্তানের জন্য সিএসএস নির্বাচনকারী হলেন:

.section > :first-child

সরাসরি নির্বাচকটি> এবং প্রথম শিশু নির্বাচক হলেন: প্রথম-শিশু

এর আগে কোনও তারকাচিহ্নের প্রয়োজন নেই: যেমনটি অন্যরা পরামর্শ দেয়। আপনি ট্যাগটি প্রেরণের মাধ্যমে এই সমাধানটি সংশোধন করে ডিওএম অনুসন্ধানকে ত্বরান্বিত করতে পারেন:

div.section > :first-child