CSS :nth-child() সিলেক্টর: সম্পূর্ণ গাইড

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

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

সেটায় CSS :nth-child পসিডো-ক্লাস কাজে লাগে। :nth-child পসিডো-ক্লাস HTML পেজে আইটেমের তালিকার অবস্থান অনুযায়ী এলিমেন্ট সিলেক্ট করে।

এই টিউটোরিয়ালে উদাহরণসহ পসিডো-ক্লাসের মৌলিক বিষয় এবং :nth-child পসিডো-ক্লাসের ব্যবহার আলোচনা করা হয়েছে। এটি পড়া শেষ করলে আপনি ওয়েব পেজে এলিমেন্ট সিলেক্ট করতে :nth-child পসিডো-ক্লাস ব্যবহারে দক্ষ হবেন।

CSS পসিডো-ক্লাসসমূহ

CSS-এ সিলেক্টর ব্যবহার করে ওয়েব পেজের নির্দিষ্ট এলিমেন্ট সিলেক্ট করা হয় যাতে স্টাইল প্রয়োগ করা যায়। উদাহরণস্বরূপ, একটি সিলেক্টর সব <p> এলিমেন্টের টেক্সট রং সবুজ করতে পারে।

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

CSS :nth-child পসিডো-ক্লাস

:nth-child পসিডো-ক্লাস একটি গ্রুপের এলিমেন্টে স্টাইল প্রয়োগ করে। আপনি কোনো এলিমেন্টের অবস্থান বা একাধিক এলিমেন্টের উপর ভিত্তি করে স্টাইল প্রয়োগ করতে পারেন। একটি সাধারণ :nth-child নিয়ম হলো লিস্টের বিষম বা সম অবস্থানের সব এলিমেন্ট রং করা।

:nth-child পসিডো-ক্লাসের সিনট্যাক্স:

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

এই উদাহরণটি ভাঙে দেখা যাক:

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

এই ক্ষেত্রে আমরা লিস্টের প্রতি দ্বিতীয় <li> এলিমেন্টে স্টাইল প্রয়োগ করেছি।

:nth-child স্বীকৃত মানগুলো

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

• odd: লিস্টে বিষম সংখ্যা অবস্থানের এলিমেন্ট সিলেক্ট করে।
• even: লিস্টে সম সংখ্যা অবস্থানের এলিমেন্ট সিলেক্ট করে।

দ্বিতীয়ত, :nth-child পসিডো-ক্লাস কাস্টম সূত্র গ্রহণ করে যা ওয়েব পেজে কোন এলিমেন্টগুলো সিলেক্ট হবে তা নির্দিষ্ট করে। কিছু উদাহরণ সূত্র:

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

n হলো লিস্টে আইটেমের অবস্থান।

এখন :nth-child পসিডো-ক্লাসের মৌলিক বিষয় জানা থাকায়, আমরা এর কিছু উদাহরণ দেখব।

CSS :nth-child উদাহরণসমূহ

চলুন :nth-child পসিডো-ক্লাসের দুটি উদাহরণ দেখি।

:nth-child টেবিল

:nth-child পসিডো-ক্লাসের একটি সাধারণ ব্যবহার হলো টেবিলের সারি সিলেক্ট করা।

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

নিচের কোড ব্যবহার করে এই টেবিল তৈরি করা যায়:

<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>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

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

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

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

tr সিলেক্টর সব টেবিল সারি (HTML-এ <tr> ট্যাগ) সিলেক্ট করতে ব্যবহৃত হয়, এবং :nth-child(even) পসিডো-ক্লাস সম আইডি নম্বর সম্পন্ন সব টেবিল সারি সিলেক্ট করে। প্রতিটি সম-নম্বর টেবিল সারির পটভূমির রং হট পিংক সেট করা হয়েছে।

:nth-child লিস্ট

:nth-child পসিডো-ক্লাসের আরেকটি সাধারণ ব্যবহার হলো লিস্টের আইটেম হাইলাইট করা।

ধরুন, রান্না ক্লাবের প্রতিটি সদস্যের নামের একটি লিস্ট তৈরি করতে বলা হয়েছে। লিস্টের প্রথম তিন নাম হালকা নীল রঙে থাকবে, কারণ তারা ক্লাবে পদবী ধারণ করে।

নিচের কোড ব্যবহার করে এই লিস্ট তৈরি করা যায়:

<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>

উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমরা <ul> ট্যাগ ব্যবহার করে একটি আনঅর্ডার্ড লিস্ট সংজ্ঞায়িত করেছি। তারপর <li> ট্যাগ ব্যবহার করে লিস্টে সাত নাম যোগ করেছি, প্রতিটি <li> ট্যাগে একটি নাম রয়েছে।

আমাদের CSS কোডে, আমরা :nth-child সিলেক্টর ব্যবহার করে লিস্টের প্রথম তিনটি <li> ট্যাগ সিলেক্ট করেছি। স্পষ্টত, আমরা -n+3 সূত্রটি ব্যবহার করেছি, যা আমাদের প্রথম তিন নাম সিলেক্ট করতে দেয়। তারপর সিলেক্ট করা <li> এলিমেন্টগুলোর টেক্সট রং হালকা নীল করা হয়েছে।

লিস্ট সম্পর্কে আরও জানতে আমাদের HTML লিস্ট গাইড দেখুন।

উপসংহার

:nth-child সিলেক্টর আপনাকে একটি গ্রুপে এলিমেন্টের অবস্থান অনুযায়ী সিলেক্ট করতে দেয় যাতে আপনি CSS স্টাইল প্রয়োগ করতে পারেন।

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

CSS সম্পর্কে আরও জানতে আগ্রহী? আমাদের How to Learn CSS গাইড দেখুন। সেখানে শীর্ষ শিক্ষামূলক সংস্থান এবং কোর্স সম্পর্কে টিপস এবং গাইডেন্স পাবেন।