CSS-এ id ব্যবহার

id ব্যবহার করার সময় পূর্ববর্তী পাঠগুলোতে আমরা যে সকল সিলেক্টর ম্যানিপুলেশন শিখেছি সেগুলো সবই উপলব্ধ।

উদাহরণ

ধরুন আমাদের নিম্নলিখিত কোড আছে:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

চলুন id যার মান block, সেই এলিমেন্টের ভিতর থেকে h2 সিলেক্ট করি এবং এটিকে লাল রঙে রাঙাই:

#block h2 {
	color: red;
}

এবং এখন চলুন id যার মান block, সেই এলিমেন্টের ভিতর থেকে p সিলেক্ট করি এবং এটিকে সবুজ রঙে রাঙাই:

#block p {
	color: green;
}

উদাহরণ

ধরুন এখন আমাদের নিম্নলিখিত কোড আছে:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

চলুন id যার মান block, সেই এলিমেন্টের ভিতরে থাকা header ক্লাস যুক্ত এলিমেন্টগুলো সিলেক্ট করি এবং সেগুলোকে লাল রঙে রাঙাই:

#block .header {
	color: red;
}

এবং এখন id যার মান block, সেই এলিমেন্টের ভিতরে থাকা header ক্লাস যুক্ত h2 হেডিংগুলো সিলেক্ট করি এবং সেগুলোকে লাল রঙে রাঙাই:

#block h2.header {
	color: red;
}

ব্যবহারিক সমস্যা

একটি সিলেক্টর লিখুন যা id যার মান elem, সেই এলিমেন্টের ভিতরের সব h2 সিলেক্ট করবে। নিম্নলিখিত কোডে আপনার সিলেক্টরটি পরীক্ষা করুন:

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

একটি সিলেক্টর লিখুন যা id যার মান elem, সেই এলিমেন্টের ভিতরের text ক্লাস যুক্ত সব এলিমেন্ট সিলেক্ট করবে। নিম্নলিখিত কোডে আপনার সিলেক্টরটি পরীক্ষা করুন:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

একটি সিলেক্টর লিখুন যা id যার মান elem, সেই এলিমেন্টের ভিতরের text ক্লাস যুক্ত সব প্যারাগ্রাফ সিলেক্ট করবে। নিম্নলিখিত কোডে আপনার সিলেক্টরটি পরীক্ষা করুন:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">---</li>
		<li class="text">---</li>
		<li class="text">---</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

একটি সিলেক্টর লিখুন যা id যার মান elem, সেই এলিমেন্টের ভিতরের text ক্লাস যুক্ত সব li সিলেক্ট করবে। নিম্নলিখিত কোডে আপনার সিলেক্টরটি পরীক্ষা করুন:

<div id="elem">
	<p class="text">---</p>
	<p class="text">---</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>