সিএসএস `:not(:first-child) দিয়ে প্রথমটি ছাড়া কীভাবে সমস্ত HTML উপাদান নির্বাচন করবেন তা শিখুন নির্বাচক
আপনি যদি আপনার CSS স্টাইলশীটে নিম্নলিখিত নিয়ম-সেট যোগ করেন, আপনার সম্পূর্ণ ওয়েবসাইটের প্রতিটি h2 উপাদান একটি 64px শীর্ষ মার্জিন পাবে।
h2 {
margin-top: 64px;
}কিন্তু আপনি যদি সাধারণভাবে আপনার ওয়েবসাইটের প্রথম h2 উপাদানে, কিন্তু অন্য প্রতিটি h2 উপাদানে সেই শীর্ষ মার্জিনটি দিতে না চান?
:not(:first-child) নির্বাচক ব্যবহার করুন
আপনার স্টাইলশীটে নিম্নলিখিত নিয়ম-সেট যোগ করুন:
h2:not(:first-child) {
margin-top: 64px;
}এখন আপনার ওয়েবসাইটের প্রতিটি h2 উপাদান ধারাবাহিকভাবে একই মার্জিন-টপ মান পাবে — প্রতিটি নথিতে (পৃষ্ঠা/পোস্ট) প্রথম h2 উপাদান ছাড়া।
:not(:first-child) নির্বাচকের জন্য একটি ব্যবহারের ক্ষেত্রে
ধরা যাক আপনি আপনার ওয়েবসাইটের টাইপোগ্রাফিক লেআউট স্টাইল করছেন। আপনি সিদ্ধান্ত নিন যে আপনার সমস্ত প্রবন্ধ h2 শিরোনামের উপাদানগুলির একটি margin-top: 64px; থাকা উচিত বিভাগগুলির মধ্যে কিছু শ্বাস নেওয়ার জায়গা দিতে।
কিন্তু প্রতিটি নিবন্ধের শীর্ষে, আপনার একটি প্রচ্ছদ চিত্র সহ একটি ম্যাগাজিন/পোস্টার শৈলী সহ একটি ভূমিকা বিভাগ রয়েছে, একটি ওভারলে এবং উপরে বিভিন্ন পাঠ্য উপাদান রয়েছে৷ সেই ক্ষেত্রে, আপনি বেশ কিছু শিরোনাম উপাদান ব্যবহার করতে পারেন (h1 শিরোনামের জন্য, h2 ট্যাগলাইন, ইত্যাদির জন্য)।
সেই ক্ষেত্রে, আপনি সম্ভবত আপনার নিবন্ধের মতো আপনার ভূমিকা বিভাগে ঠিক একই ব্যবধানের মান (মার্জিন/প্যাডিং) ব্যবহার করতে চান না। :not(:first-child) ব্যবহার করে নির্বাচক, আপনি সেই সমস্যাটি দূর করুন।
আপনি প্রতিটি HTML উপাদানে এই নির্বাচক ব্যবহার করতে পারেন। আরেকটি সাধারণ ব্যবহারের ক্ষেত্রে যদি আপনি একটি অ-ক্রমবিহীন তালিকা <ul> ব্যবহার করেন আপনার মেনু জন্য. আপনার কিছু খুব নির্দিষ্ট স্টাইলিং থাকতে পারে যা আপনি ul এ যোগ করতে চান আপনার মেনুতে, কিন্তু আপনার সাইটের বাকি অংশে নয় (সারিবদ্ধকরণ, সীমানা, রঙ, ইত্যাদি)।
সিএসএস কি এখন ক্লাসের সাথে স্টাইলিং সম্পর্কে নয়?
আধুনিক ওয়েব ডেভেলপমেন্টে, স্টাইলিং উপাদান নির্বাচকদের সরাসরি এড়ানো জনপ্রিয়। বেশিরভাগই ক্লাস ব্যবহার করে এখন আমিও ক্লাসের একজন ভক্ত, কারণ তারা ক্রমবর্ধমান ওয়েব প্ল্যাটফর্মে স্কেলযোগ্য এবং পুনরায় ব্যবহারযোগ্য CSS লেখা সহজ করে তোলে।
যাইহোক, সরাসরি নির্বাচক স্টাইলিং এখনও এটির জায়গা আছে। আপনার পণ্যের UI এর মাধ্যমে স্বয়ংক্রিয়ভাবে ধারাবাহিকতা এবং অভিন্নতা স্থাপন করার জন্য উপাদান নির্বাচকদের উপর সরাসরি কিছু বেসলাইন/গ্লোবাল স্টাইলিং স্থাপন করা ব্যবহারিক। এই পদ্ধতিটি আপনাকে অনেক পুনরাবৃত্তিমূলক UI স্টাইলিং সংরক্ষণ করতে পারে — যখন সঠিকভাবে করা হয়।
