CSS আইডি সিলেক্টর একটি ইউনিক আইডি বিশিষ্ট HTML এলিমেন্টকে টার্গেট করে।
আইডি সিলেক্টর সিনট্যাক্স:
#id-name { property-name: value; }এখানে একটি HTML এলিমেন্ট যা সেইম আইডি নাম অ্যাট্রিবিউট ভ্যালু হিসেবে রাখে:
<div id="id-name"></div>CSS আইডি সিলেক্টর #id-name <div> এলিমেন্টের সাথে অ্যাটাচড যেটির id-name অ্যাট্রিবিউট আছে। এর মানে যে আপনি আপনার CSS স্টাইলশীটে #id-name-এ যেসব স্টাইলিং প্রপার্টি যোগ করবেন সেগুলো <div>-এ প্রয়োগ হবে।
হ্যাশ সিম্বল (#) আইডি নামের আগে একটি স্পেসিফিক CSS সিনট্যাক্স। আপনি যখন আইডি নাম HTML এলিমেন্টে আইডি অ্যাট্রিবিউট হিসেবে যোগ করেন, তখন আপনি # সিম্বল ব্যবহার করেন না।
এখন আমরা যা শিখলাম সেটি একটি প্র্যাকটিক্যাল উদাহরণে ব্যবহার করি।
এখানে একটি HTML <button> এলিমেন্ট কিছু ডিফল্ট স্টাইলিংসহ যা ব্রাউজারের ইউজার এজেন্ট স্টাইলশীট থেকে ইনহেরিট করা:
<button>Button</button>ডিফল্ট লুক:
বোরিং হা?
চলুন ডিফল্ট বাটন স্টাইলিং ওভাররাইড করি একটি CSS আইডি #my-button তৈরি করে এবং কিছু স্টাইলিং প্রপার্টি দিয়ে:
#my-button { font-size: 18px; padding: 14px 24px; border-radius: 8px; border: none; background-color: #F7575C; color: white; }তারপর আইডিটি বাটন এলিমেন্টে একটি আইডি অ্যাট্রিবিউট হিসেবে যোগ করুন:
<button id="my-button">Button</button>ফলাফল:
আইডি সিলেক্টর সম্পর্কে জানা দরকার সবচেয়ে গুরুত্বপূর্ণ জিনিস হচ্ছে CSS ক্লাস সিলেক্টরির থেকে ভিন্ন, আইডিগুলো একটি পেজে শুধু এক 엘িমেন্টে প্রয়োগ করা যায়। এটিই আইডিকে ক্লাসের চেয়ে কম ফ্লেক্সিবল বানায়, কিন্তু আরও প্রিডিক্টেবল।
রুল অফ থাম্ব হচ্ছে শুধু আইডি ব্যবহার করুন সিঙ্গেল এলিমেন্টের জন্য যেগুলো এক পেজে একবার দেখায়, যেমন হেডার, ফুটার, বা নেভিগেশন বার।
