CSS Selectors

মনে করুন, আপনার কাছে নিচের HTML আছে।

<h1> Main heading with colorful text </h1>
<h1> Main heading </h1>
<h5> heading 5 with css </h5>
<h5> heading 5 with css </h5>
<h5> heading 5 with css </h5>

এখন আপনি যদি চান, সবগুলো h1 এর text কালার লাল হবে তাহলে আপনার selector হলো h1. CSS লেখার ফরম্যাট হল:

selector
{
    এখানে আপনার css লিখুন। 
}

h1, selector হলে CSS হবে:

এখন মনে করুন, যতগুলো h1 থাকুক না কেন শুধু মাত্র একটিতে CSS করতে চান , বাকিগুলো আগের মত থাকবে আর একটু বুঝিয়ে বলি, ধরুন, আপনি নিচের CSS লিখলেনঃ

h1{ color: red; }

তাহলে কি হবে? Main Heading with Colorful text এবং Main Heading দুটি লেখার কালার ই লাল হবে।

ফলাফল

এখন আপনি চান, শুধুমাত্র প্রথম h1 এর text এর কালার লাল করতে তাহলে কিভাবে করবেন , এজন্য id নামে নতুন একটি attribute আছে সেটি ব্যবহার করতে হবে । যেমনঃ id=”colorful-heading” এমন একটি attribute প্রথম h1 এর ভেতর দিয়ে দিতে পারেন। অর্থাৎ প্রথমে h1 টি দেখতে নিচের মত হবেঃ

 <h1 id="colorfull-heading">Main heading with colorful text.</h1>

এখন আপনি এই h1 কে selector না ধরে id এর value টাকে selector ধরুন অর্থাৎ উপরের উদাহরণে , selector হবে colorful-heading. id কে selector ধরলে শুরুতে # লিখে দিতে হয় অর্থাৎ CSS টি হবে:

#colorfull-heading
{
  color: red;
}

সম্পূর্ন কোডটি দেখতে এই লিংকে ক্লিক করুন।

id এর মান নির্ধারণে নিচের বিষয়গুলো খেয়াল রাখবেন:

  • ১.সংখ্যা ব্যবহার করতে পারেন, তবে শুরুতে না। যেমন: 1colorful-heading লেখা যাবে না। তবে colorful-heading1 লেখা যাব।
  • ২.স্পেস ব্যবহার করা যাবে না ।যেমন: colorful heading লেখা যাবে না। একাধিক শব্দ আলাদা করতে হাইফেন(-) , underscore(_) ব্যবহার করতে পারে।

এখন আর একটি পরিস্থিতির কথা চিন্তা করুন । উপরের html এ তিনটি h5 আছে ।সেগুলোর মাঝে প্রথম দুটিতে আপনি text এর কালার সবুজ করতে চান আর শেষের টি কোন পরিবর্তন হবে না । এক্ষেত্রেও আপনি h5 কে selector ধরতে পারেন না। প্রথম দুটি h5 এর মাঝে দুটি id যোগ করে দিতে পার। যেমন:

  <h5 id="colorfull-h5"> Heading 5 with css</h5>
  <h5 id="colorfull-h5"> Heading 5 with css</h5>

এবং নিচের CSS লিখে দিলেন:

#colorfull-h5{
  color:green
}

সম্পূর্ন কোডটি হবেঃ

ফলাফল

আপনি দেখছেন , উপরের কোডটি আশানুরূপ কাজ করছে। কিন্তু একই নামে একটির বেশি id ব্যবহার করা যাবে না। একাধিক element এর উপর common কোন CSS করতে সেগুলোতে নতুন একটি attribute যোগ করে দিতে হয়। সেটি হলো class. class লেখার নিয়ম টা id লেখার মতই অর্থাৎ কোডটি হবে

ফলাফল

class এর উপর css করতে ডট (.) ব্যবহার করতে হয়। তাই #colorfull-h5 না হয়ে .colorfull-h5 হয়েছে।

অনেকের মাঝে প্রশ্ন তৈরি হয় কখন id আর কখন class ব্যবহার করতে হয়? সংক্ষেপে উত্তর হল শুধুমাত্র একটি HTML element কে আলাদা করে style করতে চাইলে সেটির ভেতর id বসিয়ে দিন। আর একাধিক HTML element কে একসাথে grouping করতে class বসিয়ে দিন।