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