ব্যবহার: টেবিল সঙ্গে nth- এর- টাইপ (এন)
টেবিলগুলিকে সহজে পড়তে, এটি বিকল্প পটভূমির রংগুলির সাথে শৈলী সারিগুলির জন্য প্রায়ই সহায়ক। শৈলী টেবিলের সবচেয়ে সাধারণ উপায় হল প্রতিটি সারির পটভূমির রঙ সেট করা। এটি প্রায়ই "জেব্রা স্ট্রাইপ" হিসাবে উল্লেখ করা হয়।
আপনি এটি করতে পারেন এটি একটি CSS বর্গের সাথে প্রতিটা সারি সেট করে এবং তারপর সেই ক্লাসের জন্য শৈলী নির্ধারণ করে। এই কাজ কিন্তু এটি সম্পর্কে যেতে সবচেয়ে ভাল বা সবচেয়ে কার্যকর উপায় নয়।
এই পদ্ধতি ব্যবহার করার সময়, প্রতিটি টেবিলের পরিবর্তনের সাথে সামঞ্জস্যপূর্ণ করার জন্য আপনাকে টেবিলের প্রত্যেকটি সারিটি সম্পাদনা করতে হবে। উদাহরণস্বরূপ, যদি আপনি আপনার টেবিলে একটি নতুন সারি সন্নিবেশ করান, তাহলে নীচের প্রত্যেকটি সারিটিকে অবশ্যই শ্রেণী পরিবর্তন করতে হবে।
সিএসএস জেব্রা ফিতে দিয়ে শৈলী টেবিল সহজ করে তোলে। আপনি কোনও অতিরিক্ত এইচটিএমএল অ্যাট্রিবিউট বা সিএসএস ক্লাস যোগ করার প্রয়োজন নেই, আপনি শুধু: nth-of-type (n) সিএসএস সিলেক্টর ব্যবহার করেন ।
: Nth-of-type (n) সিলেক্টর সিএসএসের একটি স্ট্রাকচারাল ছদ্ম-ক্লাস যা আপনাকে পিতামাতা ও ভাইবোনদের সাথে তাদের সম্পর্কের উপর ভিত্তি করে শৈলী উপাদানগুলি মঞ্জুরি দেয়। আপনি তাদের উত্স ক্রমের উপর ভিত্তি করে এক বা একাধিক উপাদান নির্বাচন করতে এটি ব্যবহার করতে পারেন। অন্য কথায়, এটি একটি নির্দিষ্ট ধরনের তার পিতা বা মাতা এর nth শিশু যে প্রতিটি উপাদান মেলে পারেন।
অক্ষর n একটি শব্দ হতে পারে (যেমন অদ্ভুত বা এমনকি), একটি সংখ্যা, অথবা একটি সূত্র।
উদাহরণস্বরূপ, একটি হলুদ ব্যাকগ্রাউন্ড কালার দিয়ে প্রতি প্যারাগ্রাফ ট্যাগটি স্টাইল করতে, আপনার CSS ডকুমেন্টটি এতে অন্তর্ভুক্ত হবে:
p: nth-of-type (বিজোড়) {
পটভূমি: হলুদ;
}
আপনার HTML টেবিল দিয়ে শুরু করুন
প্রথমে, আপনার টেবিলটি তৈরি করুন যেমনটি আপনি সাধারণত HTML এ লিখবেন সারি বা কলাম কোন বিশেষ ক্লাস যোগ করবেন না।
আপনার স্টাইলশীটে, নিম্নলিখিত CSS যোগ করুন:
tr: nth-of-type (বিজোড়) {
পটভূমি-রঙ: #ccc;
}
এটি প্রথম সারি দিয়ে শুরু করে একটি ধূসর পটভূমির রঙের সাথে প্রতিটা সারিটি স্টাইল করবে।
একই পথে স্টাইল বিকল্প কলাম
আপনি আপনার টেবিলের কলামে একই ধরনের স্টাইলিং করতে পারেন। এটি করার জন্য, কেবল আপনার CSS ক্লাসে tr পরিবর্তন করুন। উদাহরণ স্বরূপ:
td: nth-of-type (বিজোড়) {
পটভূমি-রঙ: #ccc;
}
একটি nth- এর- টাইপ (এন) নির্বাচক মধ্যে সূত্র ব্যবহার করে
নির্বাচক ব্যবহার একটি সূত্র জন্য সিনট্যাক্স একটি + বি হয়।
একটি একটি সংখ্যা যা চক্র বা সূচক আকারের প্রতিনিধিত্ব করে।
n আসলে অক্ষর "n" এবং একটি পাল্টা প্রতিনিধিত্ব করে, যা 0 এ তারকা।
+ একটি অপারেটর, যা হতে পারে "-"
বি একটি পূর্ণসংখ্যা এবং অফসেট মান প্রতিনিধিত্ব করে - উদাহরণস্বরূপ, নির্বাচনকারী কতগুলি সারি নিচে পটভূমির রং প্রয়োগ করা উচিত একটি অপারেটর সূত্র অন্তর্ভুক্ত করা হয় যদি এটি প্রয়োজন।
উদাহরণস্বরূপ, যদি আপনি প্রত্যেক তৃতীয় সারির জন্য একটি পটভূমির রঙ সেট করতে চান, আপনার সূত্রটি 3n + 0 হবে। আপনার CSS এই মত চেহারা হতে পারে:
tr: nth-of-type (3n + 0) {
পটভূমি: slategray;
}
Nth- এর-টাইপ নির্বাচক ব্যবহার করার জন্য সহায়ক সরঞ্জাম
যদি আপনি ছদ্ম-ক্লাসের সংখ্যা-এর-টাইপ নির্বাচক ব্যবহার করে সূত্রের দিক থেকে একটু ভীতি অনুভব করছেন, তবে চেষ্টা করুন: nth পরীক্ষক সাইটটি এমন একটি দরকারী টুল যা আপনাকে সিনট্যাক্স সংজ্ঞায়িত করতে সাহায্য করতে পারে যা আপনি চান চেহারাটি অর্জন করতে পারেন। Nth-of-type নির্বাচন করার জন্য ড্রপডাউন মেনু ব্যবহার করুন (আপনি এখানে অন্যান্য ছদ্ম-ক্লাসগুলির সাথেও পরীক্ষা করতে পারেন, যেমন, nth-child)।