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