প্রথম-শিশু এবং: প্রথম ধরণের মধ্যে পার্থক্য কী?

Question

আমি element:first-childএবং এর মধ্যে পার্থক্য বলতে পারি নাelement:first-of-type

উদাহরণস্বরূপ বলুন, আপনার একটি ডিভ ছিল

div:first-child
→ সমস্ত <div>উপাদান যা তাদের পিতামাতার প্রথম সন্তান।

div:first-of-type
→ সমস্ত <div>উপাদান যা <div>তাদের পিতামাতার প্রথম উপাদান।

এটিকে ঠিক একই জিনিস বলে মনে হয় তবে তারা আলাদাভাবে কাজ করে।

কেউ দয়া করে ব্যাখ্যা করতে পারেন?

Comments

প্রথম শিশু কেবলমাত্র পিতামাতার প্রথম সন্তানের উদ্দেশ্যেই লক্ষ্যবস্তু হয়, যেখানে টাইপের প্রথমটি সেই ধরণের প্রথম সন্তানকে লক্ষ্য করে (ডিভ বা স্প্যান বা এটি যাই হোক না কেন আপনি টার্গেট করার চেষ্টা করছেন)

— হুয়াংিজম

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

— n8bar

Answer 1

একটি পিতামাতার উপাদানগুলির মধ্যে এক বা একাধিক শিশু উপাদান থাকতে পারে:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

এই শিশুদের মধ্যে, তাদের মধ্যে একজনই প্রথম হতে পারে। এটি মিলেছে :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

মধ্যে পার্থক্য :first-childএবং :first-of-typeযে :first-of-typeযা HTML এ তার ট্যাগ নাম দ্বারা প্রতিনিধিত্ব করা হয় তার উপাদান ধরন, প্রথম উপাদান ম্যাচ হবে, এমনকি যদি যে উপাদান পিতা বা মাতা এর প্রথম সন্তান নয় । এখনও অবধি আমরা যে শিশু উপাদানগুলির দিকে তাকাচ্ছি সেগুলি সবই হয়েছে divতবে আমার সাথে সহ্য করুন, আমি কিছুটা হলেও তা পেয়ে যাব।

এখনকার জন্য, বিপরীতটি সত্য ঝুলিতে: কোন :first-childএছাড়াও :first-of-typeঅপরিহার্যতা দ্বারা। যেহেতু এখানে প্রথম শিশুটিও প্রথম div, এটি সিউডো-শ্রেণির পাশাপাশি টাইপ নির্বাচনকারী উভয়ের সাথেই মিলবে div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

এখন, আপনি যদি প্রথম সন্তানের divধরণটি অন্য কোনও কিছু থেকে পরিবর্তিত করেন , যেমন h1, এটি এখনও প্রথম শিশু হবে তবে এটি divস্পষ্টতই প্রথম হবে না ; পরিবর্তে, এটি প্রথম (এবং কেবল) হয়ে যায় h1। divএকই পিতামাতার মধ্যে এই প্রথম সন্তানের অনুসরণকারী যদি অন্য কোনও divউপাদান থাকে তবে those উপাদানগুলির মধ্যে প্রথমটি মিলবে div:first-of-type। প্রদত্ত উদাহরণে, দ্বিতীয় শিশুটি divপ্রথম সন্তানের পরিবর্তিত হওয়ার পরে প্রথম হয় h1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

:first-childসমান যে নোট :nth-child(1)।

এটি এও বোঝায় যে যে কোনও উপাদানগুলির মধ্যে :first-childএকবারে কেবলমাত্র একক শিশু উপাদানের মিল থাকতে পারে , তবে এটি :first-of-typeসিউডো-ক্লাসের সাথে মিলিয়ে যতগুলি শিশু রয়েছে তার সংখ্যার মতো বাচ্চাদের সংখ্যা রয়েছে। আমাদের উদাহরণে, নির্বাচক .parent > :first-of-type(ছদ্মরূপে ছদ্মবেশী *যোগ্যতার সাথে :first-of-type) কেবল দুটি নয়, দুটি উপাদানের সাথে মিলবে :

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

এটি একই জন্য সত্য :last-childএবং এটিও হ'ল :last-of-type: যে কোনও :last-childপ্রয়োজনীয়তার দ্বারাও :last-of-type, যেহেতু একেবারে কোনও উপাদান একে তার পিতামাতার মধ্যে অনুসরণ করে না। তবুও, কারণ গত divএছাড়াও শেষ সন্তান হয়, h1না শেষ সন্তান, তার ধরনের গত থাকা সত্ত্বেও হতে পারে।

:nth-child()এবং :nth-of-type()যখন সালিসি ইন্টিজার আর্গুমেন্টের সাথে ব্যবহার করা হয় (যেমন :nth-child(1)উপরে বর্ণিত উদাহরণ হিসাবে ) নীতিগতভাবে একইভাবে কাজ করে তবে যেখানে তারা পৃথক হয় সেগুলির সাথে মিলিত সংখ্যার সম্ভাব্য সংখ্যায় :nth-of-type()। এটি পি: নবম-সন্তানের (২) এবং পি: নবম-টাইপ (2) এর মধ্যে পার্থক্য কী তা বিশদে covered াকা পড়েছে?

Comments

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

আমি এই উত্তরের উপর ভিত্তি করে একটি নমুনা তৈরি করেছি: codepen.io/bigtinabang/pen/pmMPxO

— টিনা চেন

Answer 2

আমি এখানে first-childএবং first-of-typeএখানে পার্থক্য প্রদর্শনের জন্য একটি উদাহরণ তৈরি করেছি ।

এইচটিএমএল

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div> 

সিএসএস

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

সম্পূর্ণ উদাহরণটি দেখতে, দয়া করে https://jsfiddle.net/bwLvyf3k/1/ দেখুন

Answer 3

প্রথম-শিশু-ধরণের এবং প্রথম সন্তানের মধ্যে পার্থক্যটি উদাহরণের সাথে বোঝা যেতে পারে meআপনি আমার দ্বারা তৈরি ফোলিংয়ের উদাহরণটি বুঝতে হবে এবং এটি সত্যই কাজ করে আপনি আপনার সম্পাদকের কোডগুলি পেস্ট করতে পারবেন আপনি বুঝতে পারবেন তারা কী এবং কীভাবে তারা কাজ করে

প্রথম ধরণের জন্য কোড # 1:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

ফলাফল

.p1, .p2,। 3 কে স্টাইলযুক্ত করা হবে এবং তার বর্ণটি লাল হবে we যদি আমরা দ্বিতীয় ডিভের পরে .p1 রাখি তবে এটি লাল হবে।

প্রথম সন্তানের জন্য কোড # 2:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

ফলাফল:

যদি আমরা দ্বিতীয় ডিভ 2 এর পরে .p2 রাখি তবে এটি প্রথম ক্ষেত্রে কাজ করবে না তবে এটি লাল হবে না।