S সিনট্যাক্সের সাথে :nth-child() নির্বাচনের উপর আরও নিয়ন্ত্রণ

An+B যুক্তি প্রয়োগ করার আগে চাইল্ড উপাদানগুলির একটি সেট প্রি-ফিল্টার করুন।

ব্রামাস

টুইটার গিটহাব মাস্টোডন হোমপেজ

:nth-child() এবং :nth-last-child() ছদ্ম-শ্রেণী নির্বাচক

:nth-child() ছদ্ম-শ্রেণির নির্বাচকের সাহায্যে DOM-এ উপাদানগুলিকে তাদের সূচী দ্বারা নির্বাচন করা সম্ভব। An+B মাইক্রোসিনট্যাক্স ব্যবহার করে আপনি কোন উপাদান নির্বাচন করতে চান তার উপর সূক্ষ্ম নিয়ন্ত্রণ পাবেন।

• :nth-child(2) : 2য় সন্তান নির্বাচন করুন।
• :nth-child(2n) : সমস্ত এমনকি শিশু নির্বাচন করুন (২য়, ৪র্থ, ৬ষ্ঠ, ৮ম, ইত্যাদি)।
• :nth-child(2n+1) : সমস্ত বিজোড় শিশু নির্বাচন করুন (1ম, 3য়, 5ম, 7ম এবং আরও অনেক কিছু) ।
• :nth-child(5n+1) : 1ম (=(5×0)+1) , 6ম (=(5×1)+1) , 11ম (=(5×2)+1) , … শিশু নির্বাচন করুন .
• :nth-child(5n+2) : 2য় (=(5×0)+2) , 7ম (=(5×1)+2) , 12ম (=(5×2)+2) , … শিশু নির্বাচন করুন .

কিন্তু, আপনি যদি A প্যারামিটারটি বাদ দেন তবে আরও সৃজনশীল নির্বাচন আপনি করতে পারেন। উদাহরণ স্বরূপ:

• :nth-child(n+3) : 3য় থেকে প্রতিটি শিশুকে বেছে নিন (3য়, 4র্থ, 5ম, এবং আরও) ।
• :nth-child(-n+5) : 5ম (1ম, 2য়, 3য়, 4র্থ, 5ম) পর্যন্ত প্রতিটি শিশুকে বেছে নিন।

এই :nth-child() নির্বাচনের কয়েকটি একত্রিত করুন এবং আপনি উপাদানগুলির পরিসর নির্বাচন করতে পারেন:

• :nth-child(n+3):nth-child(-n+5) : 3য় থেকে 5ম (3য়, 4র্থ, 5ম) পর্যন্ত প্রতিটি শিশুকে বেছে নিন।

:nth-last-child() ব্যবহার করে আপনি অনুরূপ নির্বাচন করতে পারেন, কিন্তু শুরু থেকে গণনা শুরু করার পরিবর্তে, আপনি শেষ থেকে গণনা শুরু করেন।

of S সিনট্যাক্সের সাথে প্রাক-ফিল্টারিং নির্বাচন

CSS সিলেক্টর লেভেল 4- এ নতুন হল একটি নির্বাচক তালিকাকে :nth-child() এবং :nth-last-child() এ বিকল্পভাবে পাস করার ক্ষমতা।

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

যখন of S নির্দিষ্ট করা হয়, An+B লজিক শুধুমাত্র সেই উপাদানগুলিতে প্রয়োগ করা হয় যা প্রদত্ত নির্বাচক তালিকা S এর সাথে মেলে। এর মানে হল যে আপনি An+B কাজ করার আগে বাচ্চাদের প্রিফিল্টার করতে পারেন।

উদাহরণ

উদাহরণস্বরূপ, :nth-child(2 of .highlight) .highlight ক্লাস আছে এমন দ্বিতীয় ম্যাচিং উপাদান নির্বাচন করে। আলাদাভাবে লিখুন: ক্লাস সহ সমস্ত বাচ্চাদের মধ্যে থেকে .highlight , দ্বিতীয়টি নির্বাচন করুন।

এটি .highlight:nth-child(2) এর বিপরীতে যা ক্লাস .highlight এবং দ্বিতীয় সন্তানের উপাদানটি নির্বাচন করে।

নীচের ডেমোতে আপনি এই পার্থক্যটি দেখতে পারেন:

• যে উপাদানটি মেলে :nth-child(2 of .highlight) একটি গোলাপী রূপরেখা রয়েছে৷
• যে উপাদানটি মেলে .highlight:nth-child(2) একটি সবুজ রূপরেখা রয়েছে৷

মনে রাখবেন যে S হল একটি নির্বাচক তালিকা যার মানে এটি একটি কমা দ্বারা পৃথক করা একাধিক নির্বাচককে গ্রহণ করে। উদাহরণস্বরূপ, :nth-child(4 of .highlight, .sale) ভাইবোনের একটি সেট থেকে .highlight বা .sale হয় এমন চতুর্থ উপাদান নির্বাচন করে৷

নীচের ডেমোতে, যে উপাদানটি :nth-child(4 of .highlight, .sale) সাথে মেলে সেটিতে একটি কমলা রঙের রূপরেখা প্রয়োগ করা হয়েছে৷

জেব্রা-স্ট্রিপিং, পুনর্বিবেচনা করা হয়েছে

একটি ক্লাসিক উদাহরণ যেখানে :nth-child() ব্যবহার করা হয়, একটি জেব্রা-স্ট্রিপড টেবিল তৈরি করার সময়। এটি একটি ভিজ্যুয়াল কৌশল যাতে প্রতিটি টেবিলের সারি রঙ পরিবর্তন করে। সাধারণত, এটি নিম্নরূপ যোগাযোগ করা হবে:

tr:nth-child(even) {
  background-color: lightgrey;
}

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

এটি ঠিক করার জন্য, আমরা An+ An+B লজিক থেকে লুকানো সারিগুলি বাদ দিয়ে :nth-child(An+B [of S]?) ব্যবহার করতে পারি:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

বেশ মিষ্টি, তাই না?

আনস্প্ল্যাশে মার্কাস স্পিসকের ছবি

An+B যুক্তি প্রয়োগ করার আগে চাইল্ড উপাদানগুলির একটি সেট প্রি-ফিল্টার করুন।

ব্রামাস

টুইটার গিটহাব মাস্টোডন হোমপেজ

:nth-child() এবং :nth-last-child() ছদ্ম-শ্রেণী নির্বাচক

:nth-child() ছদ্ম-শ্রেণির নির্বাচকের সাহায্যে DOM-এ উপাদানগুলিকে তাদের সূচী দ্বারা নির্বাচন করা সম্ভব। An+B মাইক্রোসিনট্যাক্স ব্যবহার করে আপনি কোন উপাদান নির্বাচন করতে চান তার উপর সূক্ষ্ম নিয়ন্ত্রণ পাবেন।

• :nth-child(2) : 2য় সন্তান নির্বাচন করুন।
• :nth-child(2n) : সমস্ত এমনকি শিশু নির্বাচন করুন (২য়, ৪র্থ, ৬ষ্ঠ, ৮ম, ইত্যাদি)।
• :nth-child(2n+1) : সমস্ত বিজোড় শিশু নির্বাচন করুন (1ম, 3য়, 5ম, 7ম এবং আরও অনেক কিছু) ।
• :nth-child(5n+1) : 1ম (=(5×0)+1) , 6ম (=(5×1)+1) , 11ম (=(5×2)+1) , … শিশু নির্বাচন করুন .
• :nth-child(5n+2) : 2য় (=(5×0)+2) , 7ম (=(5×1)+2) , 12ম (=(5×2)+2) , … শিশু নির্বাচন করুন .

কিন্তু, আপনি যদি A প্যারামিটারটি বাদ দেন তবে আরও সৃজনশীল নির্বাচন আপনি করতে পারেন। উদাহরণ স্বরূপ:

• :nth-child(n+3) : 3য় থেকে প্রতিটি শিশুকে বেছে নিন (3য়, 4র্থ, 5ম, এবং আরও) ।
• :nth-child(-n+5) : 5ম (1ম, 2য়, 3য়, 4র্থ, 5ম) পর্যন্ত প্রতিটি শিশুকে বেছে নিন।

এই :nth-child() নির্বাচনের কয়েকটি একত্রিত করুন এবং আপনি উপাদানগুলির পরিসর নির্বাচন করতে পারেন:

• :nth-child(n+3):nth-child(-n+5) : 3য় থেকে 5ম (3য়, 4র্থ, 5ম) পর্যন্ত প্রতিটি শিশুকে বেছে নিন।

:nth-last-child() ব্যবহার করে আপনি অনুরূপ নির্বাচন করতে পারেন, কিন্তু শুরু থেকে গণনা শুরু করার পরিবর্তে, আপনি শেষ থেকে গণনা শুরু করেন।

of S সিনট্যাক্সের সাথে প্রাক-ফিল্টারিং নির্বাচন

CSS সিলেক্টর লেভেল 4- এ নতুন হল একটি নির্বাচক তালিকাকে :nth-child() এবং :nth-last-child() এ বিকল্পভাবে পাস করার ক্ষমতা।

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

যখন of S নির্দিষ্ট করা হয়, An+B লজিক শুধুমাত্র সেই উপাদানগুলিতে প্রয়োগ করা হয় যা প্রদত্ত নির্বাচক তালিকা S এর সাথে মেলে। এর মানে হল যে আপনি An+B কাজ করার আগে বাচ্চাদের প্রিফিল্টার করতে পারেন।

উদাহরণ

উদাহরণস্বরূপ, :nth-child(2 of .highlight) .highlight ক্লাস আছে এমন দ্বিতীয় ম্যাচিং উপাদান নির্বাচন করে। আলাদাভাবে লিখুন: ক্লাস সহ সমস্ত বাচ্চাদের মধ্যে থেকে .highlight , দ্বিতীয়টি নির্বাচন করুন।

এটি .highlight:nth-child(2) এর বিপরীতে যা ক্লাস .highlight এবং দ্বিতীয় সন্তানের উপাদানটি নির্বাচন করে।

নীচের ডেমোতে আপনি এই পার্থক্যটি দেখতে পারেন:

• যে উপাদানটি মেলে :nth-child(2 of .highlight) একটি গোলাপী রূপরেখা রয়েছে৷
• যে উপাদানটি মেলে .highlight:nth-child(2) একটি সবুজ রূপরেখা রয়েছে৷

মনে রাখবেন যে S হল একটি নির্বাচক তালিকা যার মানে এটি একটি কমা দ্বারা পৃথক করা একাধিক নির্বাচককে গ্রহণ করে। উদাহরণস্বরূপ, :nth-child(4 of .highlight, .sale) ভাইবোনের একটি সেট থেকে .highlight বা .sale হয় এমন চতুর্থ উপাদান নির্বাচন করে৷

নীচের ডেমোতে, যে উপাদানটি :nth-child(4 of .highlight, .sale) সাথে মেলে সেটিতে একটি কমলা রঙের রূপরেখা প্রয়োগ করা হয়েছে৷

জেব্রা-স্ট্রিপিং, পুনর্বিবেচনা করা হয়েছে

একটি ক্লাসিক উদাহরণ যেখানে :nth-child() ব্যবহার করা হয়, একটি জেব্রা-স্ট্রিপড টেবিল তৈরি করার সময়। এটি একটি ভিজ্যুয়াল কৌশল যাতে প্রতিটি টেবিলের সারি রঙ পরিবর্তন করে। সাধারণত, এটি নিম্নরূপ যোগাযোগ করা হবে:

tr:nth-child(even) {
  background-color: lightgrey;
}

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

এটি ঠিক করার জন্য, আমরা An+ An+B লজিক থেকে লুকানো সারিগুলি বাদ দিয়ে :nth-child(An+B [of S]?) ব্যবহার করতে পারি:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

বেশ মিষ্টি, তাই না?

আনস্প্ল্যাশে মার্কাস স্পিসকের ছবি