CSS Nth শিশু:সম্পূর্ণ গাইড

CSS :nth-child() নির্বাচক একটি গ্রুপের একটি নির্দিষ্ট অবস্থানে উপাদানগুলিতে একটি শৈলী প্রয়োগ করে। প্রায়শই, :nth-child() নির্বাচক নির্দিষ্ট তালিকা আইটেম, যেমন প্রতি দ্বিতীয় বা তৃতীয় আইটেম স্টাইল করতে ব্যবহৃত হয়।

আপনি যখন একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি একটি পাত্রে উপাদানগুলির শুধুমাত্র একটি নির্দিষ্ট সেটে একটি স্টাইল প্রয়োগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি শুধুমাত্র একটি তালিকার প্রতিটি দ্বিতীয় উপাদানে বা একটি টেবিলের প্রতিটি তৃতীয় সারিতে একটি স্টাইল প্রয়োগ করতে চাইতে পারেন৷

এখানেই CSS :nth-child pseudo-class আসে। :nth-child pseudo-class উপাদানগুলিকে একটি HTML পৃষ্ঠার আইটেমের তালিকায় তাদের অবস্থানের উপর ভিত্তি করে মেলে৷

এই টিউটোরিয়ালটি উদাহরণের রেফারেন্স সহ, ছদ্ম-শ্রেণির মূল বিষয়গুলি এবং কিভাবে আপনি :nth-child pseudo-class ব্যবহার করতে পারেন তা নিয়ে আলোচনা করবে। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি ওয়েব পৃষ্ঠায় উপাদান নির্বাচন করতে :nth-child pseudo-class ব্যবহার করে বিশেষজ্ঞ হয়ে উঠবেন।

সিএসএস সিউডো-ক্লাস

CSS-এ, নির্বাচকদের একটি ওয়েব পৃষ্ঠার নির্দিষ্ট উপাদান নির্বাচন করতে ব্যবহৃত হয় যেখানে একটি শৈলী প্রয়োগ করা উচিত। উদাহরণস্বরূপ, একটি নির্বাচক একটি ওয়েব পৃষ্ঠার সমস্ত

উপাদানের পাঠ্যের রঙ সবুজে পরিবর্তন করতে পারে৷

৷

আপনি সিদ্ধান্ত নিতে পারেন যে আপনি শুধুমাত্র একটি উপাদানের জন্য একটি শৈলী প্রয়োগ করতে চান যা একটি নির্দিষ্ট অবস্থায় বিদ্যমান। সিউডো-ক্লাসগুলি আপনাকে শৈলী প্রয়োগ করতে দেয় শুধুমাত্র যখন একটি উপাদান একটি নির্দিষ্ট অবস্থায় থাকে।

CSS :nth-child Pseudo-Class

:nth-child pseudo-class একটি গোষ্ঠীর উপাদানগুলিতে শৈলী প্রয়োগ করে। আপনি একটি নির্দিষ্ট উপাদানের অবস্থান বা একাধিক উপাদানের উপর ভিত্তি করে শৈলী প্রয়োগ করতে পারেন। একটি সাধারণ :nth-child নিয়ম হল তালিকার বিজোড় বা জোড় অবস্থানে প্রতিটি উপাদানকে রঙ করা।

এখানে :nth-child pseudo-class:

এর সিনট্যাক্স রয়েছে

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

li:nth-child(2) {
	color: lightblue;
}

আসুন এই উদাহরণটি ভেঙে দেওয়া যাক:

li যে উপাদানটিতে একটি শৈলী প্রয়োগ করা উচিত তা বোঝায়।
নম-সন্তান একটি উপাদানের সাথে মেলানোর জন্য ব্যবহৃত নির্বাচক৷
2 nth-child ব্যবহার করে একটি উপাদানের সাথে মিল করার জন্য ব্যবহৃত সূত্র।

এই ক্ষেত্রে, আমরা একটি তালিকার প্রতিটি সেকেন্ড

উপাদানে আমাদের স্টাইল প্রয়োগ করি।

:নম-শিশু গৃহীত মান

:nth-child pseudo-class দুই ধরনের মান গ্রহণ করে। প্রথমত, ছদ্ম-শ্রেণী কীওয়ার্ড মানগুলি গ্রহণ করে যা ডিফল্ট সূত্র বরাদ্দ করা হয়। এই কীওয়ার্ডগুলি হল:

বিজোড়:এমন উপাদান নির্বাচন করে যার অবস্থান একটি তালিকায় বিজোড় সংখ্যা।
জোড়:এমন উপাদান নির্বাচন করে যার তালিকায় অবস্থান একটি জোড় সংখ্যা।

দ্বিতীয়ত, :nth-child pseudo-class একটি কাস্টম সূত্র গ্রহণ করে যা একটি ওয়েব পৃষ্ঠায় pseudo-class-এর নির্বাচন করা উপাদানগুলিকে নির্দিষ্ট করে৷ এখানে কয়েকটি উদাহরণ সূত্র রয়েছে:

:nth-child(6):একটি তালিকার ষষ্ঠ উপাদান নির্বাচন করে।
:nth-child(n+2):দ্বিতীয় উপাদান এবং পরবর্তী সমস্ত উপাদান নির্বাচন করে।
:nth-child(4n):4 এর গুণিতক সমস্ত উপাদান নির্বাচন করে।

n একটি তালিকায় একটি আইটেম প্রদর্শিত অবস্থানের সমান৷

৷

এখন আমরা :nth-child pseudo-class এর মূল বিষয়গুলো জানি, আমরা ছদ্ম-শ্রেণির কিছু উদাহরণ দেখতে পারি।

CSS :nth-child উদাহরণ

আসুন দুটি উদাহরণের মধ্য দিয়ে হেঁটে যাই :nth-child pseudo-class.

:nম-শিশু টেবিল

:nth-child pseudo-class-এর একটি সাধারণ ব্যবহার হল একটি টেবিলে সারি নির্বাচন করা৷

ধরুন আমরা একটি স্থানীয় রান্নার ক্লাবের জন্য একটি ওয়েবসাইট ডিজাইন করছি। ক্লাব আমাদেরকে তাদের ওয়েবসাইটের জন্য তাদের বিশেষ মশলাদার হট চকলেট এর রেসিপি সহ একটি টেবিল একসাথে রাখতে বলেছে . ক্লাব চায় টেবিলের প্রতিটি দ্বিতীয় সারি গরম গোলাপী রঙে হাইলাইট করা হোক, যা ক্লাবের প্রধান রঙ।

আমরা নিম্নলিখিত কোড ব্যবহার করে এই টেবিলটি তৈরি করতে পারি:

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

CSS Nth শিশু:সম্পূর্ণ গাইড আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমরা দুটি কলাম এবং পাঁচটি সারি (যার মধ্যে একটি হেডার সারি) সহ একটি টেবিল সংজ্ঞায়িত করেছি। প্রথম কলামটি মশলাদার গরম চকোলেট তৈরি করতে ব্যবহৃত উপাদানগুলির তালিকা সংরক্ষণ করে। আমাদের দ্বিতীয় কলামে ব্যবহৃত প্রতিটি উপাদানের পরিমাণ সংরক্ষণ করা হয়।

কিভাবে HTML এ টেবিল তৈরি করা হয় সে সম্পর্কে আরও জানতে, HTML টেবিলের জন্য আমাদের গাইড পড়ুন।

আমাদের CSS ফাইলে, আমরা আমাদের টেবিলের প্রতিটি সমান-সংখ্যাযুক্ত সারিতে একটি স্টাইল প্রয়োগ করতে :nth-child pseudo-class ব্যবহার করেছি।

tr নির্বাচক সব টেবিল সারি নির্বাচন করতে ব্যবহার করা হয় (HTML এ ট্যাগ দ্বারা চিহ্নিত), এবং :nth-child(even) pseudo-class একটি জোড় আইডি নম্বর সহ প্রতিটি টেবিল সারি নির্বাচন করে। প্রতিটি সমান-সংখ্যাযুক্ত টেবিল সারির জন্য, টেবিলের সারির পটভূমির রঙ গরম গোলাপীতে সেট করা হয়।

:নম-সন্তানের তালিকা

:nth-child pseudo-class-এর আরেকটি সাধারণ ব্যবহার হল একটি তালিকায় আইটেম হাইলাইট করা।

ধরুন আমাদের রান্না ক্লাবের প্রতিটি সদস্যের নামের তালিকা একসাথে রাখতে বলা হয়েছে। তালিকার প্রথম তিনটি নামের পাঠ্য হালকা নীল রঙে উপস্থিত হওয়া উচিত, কারণ তারা ক্লাবে শিরোনাম ধারণ করে।

আমরা নিম্নলিখিত কোড ব্যবহার করে এই তালিকা তৈরি করতে পারি:

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
<ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>

আমরা একটি

ট্যাগ ব্যবহার করেছি, প্রতিটি
ট্যাগে একটি নাম রয়েছে।

আমাদের CSS কোডে, আমরা আমাদের তালিকার প্রথম তিনটি
ট্যাগ নির্বাচন করতে :nth-child নির্বাচক ব্যবহার করেছি। বিশেষ করে, আমরা -n+3 সূত্রটি ব্যবহার করেছি , যা আমাদের প্রথম তিনটি নাম নির্বাচন করতে দেয়। তারপরে, নির্বাচিত
উপাদানগুলির জন্য পাঠ্যের রঙ হালকা নীলে পরিবর্তিত হয়।

আপনি যদি তালিকা সম্পর্কে আরও জানতে চান, আমাদের HTML তালিকা নির্দেশিকা দেখুন৷
৷
উপসংহার

:nth-child নির্বাচক আপনাকে একটি গ্রুপে তাদের অবস্থানের উপর ভিত্তি করে উপাদান নির্বাচন করতে দেয় যেখানে আপনি CSS শৈলী প্রয়োগ করতে পারেন।

এই টিউটোরিয়ালে আলোচনা করা হয়েছে, দুটি উদাহরণের রেফারেন্স সহ, CSS সিউডো-ক্লাসের মূল বিষয়গুলি এবং কিভাবে :nth-child pseudo-class ব্যবহার করতে হয়। এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো :nth-child pseudo-class ব্যবহার শুরু করার জন্য প্রয়োজনীয় জ্ঞান দিয়ে সজ্জিত!

আপনি কি CSS সম্পর্কে আরও জানতে আগ্রহী? আমাদের কিভাবে সিএসএস শিখবেন নির্দেশিকা দেখুন। আপনি সেরা সিএসএস শেখার সংস্থান এবং কোর্সগুলি কোথায় পাবেন সে সম্পর্কে শীর্ষ শিক্ষার টিপস এবং নির্দেশিকা পাবেন৷