সিএসএস সিলেক্টর - CSS Silector


এইচটিএমএল এলিমেন্ট গুলো স্টাইল করতে সিএসএস সিলেক্টর এর ব্যবহার বেস গুরুত্বপূর্ণ। এই অধ্যায়ে সিএসএস এর বিভিন্ন সিলেক্টর সম্পর্কে আলোচনা করা হয়েছে।


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

যে সকল এইচটিএমএল এলিমেন্টে স্টাইল কোড প্রয়োগ করতে হবে, সে গুলো কে খুজে পেতে বা নির্ধারণ করতে সিএসএস সিলেক্টর ব্যবহার করা হয়। অর্থাৎ কোন এইচটিএমএল এলিমেন্টকে, নির্দিষ্ট ভাবে নির্ধারণ করে তাতে স্টাইল কোড প্রয়োগ করার পদ্ধতিটিই হল সিএসএস সিলেক্টর।

নিচে একটি সাধারণ সিএসএস সিলেক্টর এর উদাহরণ দেখুন।

উদাহরণ

<head>
<style>
p {
  color     : red;
  text-align: center;
  }
</style>
</head>
<body>

 <p">This is a paragraph working with two diffrent style code.</p>

</body>


কোড এডিটর



সিলেক্টর এর প্রকারভেদ

ব্যবহারের ওপর নির্ভর করে সিএসএস সিলেক্টর গুলোকে বিভিন্ন ভাগে ভাগ করা যায়। নিচে এগুলো দেখুন।

এছাড়াও আরও কিছু সিলেক্টর আছে, যেমন - সিডো-ক্লাস সিলেক্টর, সিডো-এলিমেন্ট সিলেক্টর, এট্রিবিউট সিলেক্টর ইত্যাদি এগুলো সিএসএস টিউটোরিয়াল এর অ্যাডভান্সড অংশে আলোচনা করা হয়েছে।


সাধারণ সিলেক্টর

এইচটিএমএল এলিমেন্টের নাম অর্থাৎ ট্যাগকেই সিএসএস সিলেক্টর রুপে ব্যবহার করে সিএসএস স্টাইল নির্ধারণ করা যায়।

নিচে একটি উদাহরণ দেখুন, যেখানে কেবল এইচটিএমএল ট্যাগ অর্থাৎ h1p ট্যাগকে সিএসএস সিলেক্টর হিসেবে ব্যবহার করা হয়েছে।

উদাহরণ

h1 {
   color     : blue;
   text-align: center;
   }
   
p {
   color     : red;
   text-align: right;
   }


কোড এডিটর



গ্রুপ সিলেক্টর

একিই রকম স্টাইল কোড গুলো, ভিন্নি ভিন্ন রকমের এইচটিএমএল এলিমেন্টে ব্যবহার করার জন্য সিএসএস গ্রুপ সিলেক্টর ব্যবহার করা হয়। স্টাইল কোড গুলোর শুরুর দিকে দ্বিতীয় বন্ধনী বা secound braket " { } " এর বাইরে এইচটিএমএল সিলেক্টর গুলোর নাম লিখে এই গ্রুপ সিলেক্টর তৈরি করা হয়। এইচটিএমএল সিলেক্টর গুলোর নামের মাঝে কমা বা comma " , " ছিনহ ব্যবহার করে নাম গুলো আলাদা করে দেয়া হয়।

নিচে একটি উদাহরণ দেখুন, যেখানে স্টাইল কোড গুলো ওয়েব পেজের নির্ধারিত এইচটিএমএল এলিমেন্টের ক্ষেত্রে প্রযোজ্য হবে।

উদাহরণ

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


কোড এডিটর



সার্বজনীন সিলেক্টর

কোন ওয়েব পেজে থাকা সকল এলিমেন্ট এর জন্য নির্দিষ্ট কিছু স্টাইল নির্ধারণ করতে সিএসএস এর সার্বজনীন বা Universal সিলেক্টর পদ্ধতি ব্যবহার করা হয়।

স্টাইল কোড গুলোর প্রথমে দ্বিতীয় বন্ধনী বা secound braket " { } " এর বাইরে একটি তারকা বা star " * " ছিনহ ব্যবহার করে Universal সিলেক্টর তৈরি করা হয়।

নিচে একটি উদাহরণ দেখুন, যেখানে স্টাইল কোড গুলো ওয়েব পেজের সকল এলিমেন্টে প্রযোজ্য হবে।

উদাহরণ

* {
  margin: 25px;
  padding:30px;
  }


কোড এডিটর



ক্লাস সিলেক্টর

এইচটিএমএল এর যে কোন ট্যাগের সাথে class আত্ত্রিবুতে ব্যবহার করে ক্লাস সিলেক্টর তৈরি করা হয়। নিচে class আত্ত্রিবুতে এর একটি উদাহরণ দেখুন।

উদাহরণ

<head>
<style>
.paragraph {
   color     : red;
   text-align: center;
   }
</style>
</head>
<body>

 <p class="paragraph">This is a paragraph working with class selector.</p>

</body>


কোড এডিটর


নোট - পরবর্তী অধ্যায়ে আমরা সিএসএস class সিলেক্টর সম্পর্কে বিস্তারিত আলোচনা করেছি।


আইডি সিলেক্টর

এইচটিএমএল এর যে কোন ট্যাগের সাথে id আত্ত্রিবুতে ব্যবহার করে আইডি সিলেক্টর তৈরি করা হয়। নিচে id আত্ত্রিবুতে এর একটি উদাহরণ দেখুন।

উদাহরণ

<head>
<style>
#paragraph {
   color     : teal;
   text-align: center;
   }
</style>
</head>
<body>

 <p id="paragraph">This is a paragraph working with id seclector.</p>

</body>


কোড এডিটর


নোট - পরবর্তীতে একটি অধ্যায়ে আমরা সিএসএস id সিলেক্টর সম্পর্কে বিস্তারিত আলোচনা করেছি।

সিএসএস এর সিলেক্টর সম্পর্কে Mozilla Developer থেকে আরও জানতে Selector (CSS) ওয়েব পেজটি ব্রাউজ করুন।