ধাপ
৩

CSS Selector

CSS এ তিন ধরনের সিলেক্টর রয়েছে। সেগুলো হলঃ

এলিমেন্ট সিলেক্টর
Class সিলেক্টর
ID সিলেক্টর

এলিমেন্ট সিলেক্টর

এলিমেন্ট সিলেক্টটর দিয়ে যে কোনো এলিমেন্টকে নির্দেশ করে রুল লিখা যায়। যেমনঃ নিচের কোডটি দিয়ে ডকুমেন্টের সকল p এলিমেন্টের রং লাল এবং এর ভেতরের লেখা/কন্টেন্টকে মাঝখানে নিয়ে আসা যাবে।

p {color: red; text-align: center;}

প্রিভিউঃ

Browser

This is a paragraph.

Class সিলেক্টর

ক্লাস সিলেক্টর নির্দিষ্ট ক্লাস যুক্ত এলিমেন্ট খুঁজে বের করে এবং তাতে রুল প্রয়োগ করে।

HTML এলিমেন্টে ক্লাস যুক্ত করতে হয় class এট্রিউটের মাধ্যমে। যেমনঃ

<p class="center">This is a paragraph.</p>

এখানে p এলিমেন্টে class এট্রিবিউটের ভ্যালু দেয়া হয়েছে center, এ center ক্লাসটির জন্য CSS রুল নির্দিষ্ট করা যাবে এভাবেঃ

.center {
	text-align: center;
	color: indigo;
}

অথবা আরো নির্দিষ্ট করতে এভাবেঃ

p.center {
	text-align: center;
	color: indigo;
}

তো, CSS ফাইলে,

Class শুরু করতে হবে . (ডট) দিয়ে।
Class এর শুরুতে কোনো সংখ্যা ব্যবহার করা যাবে না।

ID সিলেক্টর

ID সিলেক্টর এলিমেন্টের নির্দিষ্ট ID এট্রিবিউট খুঁজে বের করে তাতে রুল প্রয়োগ করে।

HTML এলিমেন্টে ID যুক্ত করতে হয় id এট্রিবিউটের মাধ্যমে। যেমনঃ

<p id="para1">This is a paragraph.</p>

এ p এলিমেন্টে id এট্রিবিউটের ভ্যালু দেয়া হয়েছে para1, এ para1 ক্লাসটির জন্য CSS রুল নির্দিষ্ট করা যাবে এভাবেঃ

#para1 {
	text-align: right;
	color: indianred;
}

অথবা আরো নির্দিষ্ট করতেঃ

p#para1 {
	text-align: right;
	color: indianred;
}

তো, CSS ফাইলে,

ID শুরু করতে হবে # (হ্যাস) দিয়ে।
একই ডকুমেন্টে একই ID অবশ্যই একের অধিক ব্যবহার করা যাবে না।
ID এর শুরুতে সংখ্যা ব্যবহার করা যাবে না।

Class এবং ID তো একই কাজ করে! তো কেন দুটি আলাদা করে বানানো হল?

Class এবং ID এর CSS এ কাজ একই হলেও HTML ফাইলে ID এর একটি বিশেষ বৈশিষ্ট্য আছে।

ID দিয়ে কোনো এলিমেন্টকে নির্দিষ্ট ভাবে চিহ্নিত করে দেয়া হয়। তাই একই ডকুমেন্টে একাধিক ID না দিতে বলা হয়।

এভাবে নির্দিষ্ট করে লাভ কি?

এভাবে নির্দিষ্ট করে লাভ আছে। তা হচ্ছে কোনো পেজের লিঙ্কের সাথে ID যুক্ত করে দিলে ডকুমেন্টটি ব্রাউজারে লোড হওয়ার সাথে সাথে ডকুমেন্টটি শুরু থেকে না দেখিয়ে ব্রাউজার স্বয়ংক্রিয় ঐ এলিমেন্টে ব্যবহারকারীকে নিয়ে যাবে। বুঝলেননা? নিচের লিঙ্ক দুটি ক্লিক দিন, তাহলেই বুঝে যাবেন।

ID ছাড়া সাধারন লিঙ্কঃ http://code.imaginativeworld.org/docs/?p=206

ID সহ লিঙ্কঃ http://code.imaginativeworld.org/docs/?p=206#onlineapps

লিঙ্কের শেষে ID যুক্ত করতে হয় #ID name দিয়ে। লিঙ্ক লিখার সাথে কোনো স্পেস ছাড়াই ID লিখতে হবে।

Grouping Selectors

নিচের উদাহরনটি দেখা যাকঃ

p {
	text-align: center;
	color: gray;
}
h1 {
	text-align: center;
	color: gray;
}
h2 {
	text-align: center;
	color: gray;
}

দেখা যাচ্ছে তিনটি সিলেক্টরে একই ডিক্লারেশন। এরকম অবস্থায় রুল গুলোকে এভাবে গ্রুপ করে একত্রে লিখা যায়ঃ

h1, h2, p {
	text-align: center;
	color: gray;
}

এভাবে কোডকে ছোট করা যায়। সিলেক্টর গ্রুপ করার সময় প্রতিটি সিলেক্টরের মাঝখানে , (কমা) ব্যবহার করা হয়।