CSS :not(:first-child) সিলেক্টর ব্যবহার করে প্রথম এলিমেন্ট বাদ দিয়ে বাকি সব সিলেক্ট করার পদ্ধতি শিখুন।
যদি আপনি লিখেন:
h2 { margin-top: 64px; }তবে ওয়েবসাইটের সব h2-এ ৬৪পিক্সেল টপ মার্জিন লাগবে। কিন্তু প্রথম h2-এ মার্জিন দিতে না চাইলে?
:not(:first-child) সিলেক্টর ব্যবহার করুন
h2:not(:first-child) { margin-top: 64px; }এখন প্রতিটি ডকুমেন্ট/পেজের সবচেয়ে প্রথম h2 বাদে সব h2-এ একই মার্জিন লাগবে।
ইউজ কেস
আর্টিকেল লেআউটে সব h2-এ margin-top: 64px দিলে ব্রিদিং রুম থাকে। কিন্তু আর্টিকেলের শুরুতে ইন্ট্রো সেকশনে কভার ইমেজ, ওভারলে, টেক্সট থাকে—সেখানে একই স্পেসিং চাওয়া নয়। :not(:first-child) এই সমস্যা সমাধান করে।
অন্য ইউজ কেস: নেভিগেশন মেনুর <ul>-এ নির্দিষ্ট স্টাইলিং চাইলে কিন্তু সাইটের অন্য ul-এ নয়।
আধুনিক CSS-এ ক্লাস ব্যবহার হয় না?
আধুনিক ডেভেলপমেন্টে এলিমেন্ট সিলেক্টর বাদে ক্লাস ব্যবহার_popular। আমিও ক্লাস পছন্দ করি—স্কেলেবল এবং রিঅюзেবল। কিন্তু ডাইরেক্ট এলিমেন্ট সিলেক্টর স্টাইলিংয়েরও জায়গা আছে—বেসলাইন/গ্লোবাল স্টাইলিং দিয়ে কনসিস্টেন্সি এনফোর্স করা যায়, রিপিটেটিভ UI স্টাইলিং বাঁচায়।
