CSS-এ ইউনিক আইডি দ্বারা এলিমেন্ট নির্বাচন

আপনি ইতিমধ্যেই জানেন যে, ক্লাসগুলি একটি গ্রুপ এলিমেন্টকে নির্দিষ্ট করার জন্য ব্যবহৃত হয়। ক্লাস ছাড়াও, id দ্বারা এলিমেন্ট নির্বাচন করা যায়, যা এলিমেন্টের একটি ইউনিক আইডেন্টিফায়ার হিসেবে কাজ করে। ইউনিক বলতে বোঝায় যে, যদি পৃষ্ঠায় ইতিমধ্যেই একটি এলিমেন্ট সেই id সহ থাকে, তবে একই id সহ অন্য কোন এলিমেন্ট থাকা উচিত নয়।

ইউনিক আইডেন্টিফায়ার id অ্যাট্রিবিউট ব্যবহার করে নির্ধারণ করা হয়, যেখানে আমরা একটি নাম লিখি। উদাহরণস্বরূপ, আসুন দুটি ব্লক তৈরি করি। প্রথমটিকে id এর মান হিসাবে block1 এবং দ্বিতীয়টিকে block2 নির্দিষ্ট করি:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

একটি নির্দিষ্ট id সহ এলিমেন্টকে স্টাইল দিতে, আপনাকে # চিহ্ন এবং আমাদের দেওয়া নামটি লিখতে হবে, এভাবে:

#block1 {
	color: red;
}
#block2 {
	color: green;
}

id অ্যাট্রিবিউট ব্যবহার করা হয় যখন এলিমেন্টের স্বতন্ত্রতা তুলে ধরার প্রয়োজন হয়। ক্লাস ব্যবহার করা হয় যখন ধরে নেওয়া হয় যে এমন অনেক এলিমেন্ট থাকতে পারে, এমনকি যদি এখন একটি মাত্র থাকে।

নিম্নলিখিত কোডটি দেওয়া আছে:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

elem1 ব্লকের কন্টেন্ট লাল রং করুন, elem2 ব্লকের কন্টেন্ট সবুজ রং করুন, এবং elem3 ব্লকের কন্টেন্ট নীল রং করুন।