CSS id বাছাইকারী

id সিলেক্টর

id সিলেক্টরটি id-পদ্ধতির উপাদানকে নির্দিষ্ট সাইটস্টাইল নির্দেশ করতে পারে

id সিলেক্টর "#"-এর মাধ্যমে নির্ধারিত হয়

নিচের দুটি id সিলেক্টরের মধ্যে, প্রথমটি উপাদানটির রঙটিকে লাল হতে পারে, এবং দ্বিতীয়টি সবুজ হতে পারে:

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

নিচের HTML কোডে, id হলে red এর p উপাদানটি লাল হবে, এবং id হলে green এর p উপাদানটি সবুজ হবে。

<p id="red">এই প্যারাগ্রাফটি লাল হবে。</p>
<p id="green">এই প্যারাগ্রাফটি সবুজ হবে。</p>

নোট:id এটি প্রত্যেক HTML ডকুমেন্টে শুধুমাত্র একবার উপস্থিত হতে পারে। কেন এইভাবে হয়, জানতে অনুগ্রহ পড়ুন XHTML: ওয়েবসাইট পুনর্নির্মাণ。

id সিলেক্টর এবং প্রসারিত সিলেক্টর

আধুনিক লেআউটে, id সিলেক্টরটি প্রসারিত সিলেক্টর তৈরির জন্য ব্যবহৃত হয়

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

উপরোক্ত সাইটস্টাইলটি শুধুমাত্র id হলে sidebar এর উপাদানের মধ্যে প্রয়োগ করা যাবে। এই উপাদানটি বেশিরভাগই div বা টেবিল কোষা, কিন্তু তা হতেও পারে অন্য কোনো টেবিল বা ব্লক উপাদান, কিংবা ইনলাইন উপাদান, যেমন <em></em> বা <span></span>। কিন্তু এই প্রয়োগটি বৈধ নয়, কারণ ইনলাইন উপাদান <span> এ <p> যুক্ত করা যায় না (যদি কোনো কারণ ভুলে গেছেন, অনুগ্রহ পড়ুন XHTML: ওয়েবসাইট পুনর্নির্মাণ）。

একটি সিলেক্টর, বহুবিধ প্রয়োগ

যদিও সাইডবার হলেও লিঙ্কসহ তারই ডকুমেন্টেই একবার শুধুমাত্র উপযোগ করা যায়, এই id সিলেক্টরটি প্রসারিত সিলেক্টর হিসাবেও অনেকবার ব্যবহার করা যায়:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

এখানে, পাতার অন্যান্য p এলিমেন্টগুলির তুলনায় sidebar-এর p এলিমেন্টকে বিশেষ পরিচালনা করা হয়, এবং, পাতার অন্যান্য সকল h2 এলিমেন্টগুলির তুলনায় sidebar-এর h2 এলিমেন্টকেও ভিন্ন বিশেষ পরিচালনা করা হয়。

একক বাছাইকারী

id বাছাইকারী যদিও তা উত্তরসূরী বাছাইকারী তৈরির জন্য ব্যবহৃত হয় না, তবুও তা স্বতন্ত্রভাবে কাজ করতে পারে:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

এই নিয়ম অনুযায়ী id হল sidebar-এর এলিমেন্টকে ১ পিক্সেল চওড়া কালো ডটডট বর্তনী থাকবে, এবং তার আশেপাশে ১০ পিক্সেল চওড়া ইনার মার্জিন (padding, অভ্যন্তরীণ স্পেস) থাকবে। পুরনো সংস্করণের Windows/IE ব্রাউজারগুলি এই নিয়মটি মেটাতে পারেন না, প্রত্যেকটি নিশ্চিত করার জন্য এই বাছাইকারীর সম্পর্কিত এলিমেন্টটি বিশেষভাবে নির্দিষ্ট করতে হবে:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

সংক্রান্ত বিষয়

আপনি ID বাছাইকারীর বিষয়ে আরও গভীরভাবে শিক্ষার জন্য CodeW3C.com-এর অত্যাধুনিক শিক্ষাক্রম পড়ুন:CSS ID বাছাইকারীর বিস্তারিত ব্যাখ্যা。