CSS সিলেক্টর: কিভাবে প্রয়োগ করবেন

CSS সিলেক্টরগুলো उन्हीं এলিমেন্টগুলোক সিলেক্ট করে যেগুলোর ওপর আপনি স্টাইল প্রয়োগ করতে পারেন। সবচেয়ে বেসিক সিলেক্টর হলো এলিমেন্ট সিলেক্টর, যা এলিমেন্টকে তার নাম দিয়ে সিলেক্ট করে। অন্যান্য সিলেক্টরগুলো হলো আইডি, ক্লাস, ইউনিভার্সেল, এবং ডিসেন্ডেন্ট সিলেক্টর।

সিলেক্টর যেকোনো CSS স্টেটমেন্টের দুটি অংশের একটি। সিলেক্টর ব্যবহার করে HTML পেজের এলিমেন্টগুলোক একটি নির্দিষ্ট স্টাইলের জন্য টার্গেট করা হয়।

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

এই গাইডে CSS-এ সিলেক্টরর মৌলিক বিষয় এবং সবচেয়ে সাধারণভাবে ব্যবহৃত সিলেক্টরগুলো আপনার কোডে কীভাবে ব্যবহার করবেন তা এক্সপ্লোর করা হয়েছে।

CSS সিলেক্টর

CSS সিলেক্টর ওই HTML এলিমেন্টগুলোক চিহ্নিত করে যেগুলোর ওপর আপনি একটি CSS স্টাইল প্রয়োগ করতে চান। সিলেক্টরগুলো এলিমেন্টগুলো তাদের নাম, আইডি, ক্লাস, এবং অন্যান্য অ্যাট্রিবিউট অনুযায়ী বাছাই করতে পারে। সিলেক্টর CSS নিয়মে একটি বন্ধনীর জোড়ার আগে থাকে।

CSS-এ, নিয়মগুলো ব্যবহার করে সংজ্ঞায়িত করা হয় কোনো এলিমেন্ট বা এলিমেন্টের পরিসরে কী স্টাইল প্রয়োগ হবে। নিয়মের দুটি উপাদান রয়েছে: সিলেক্টর এবং ডিক্লেয়ারেশন।

CSS-এ একটি নিয়মের উদাহরণ:

h1 {
  color: pink;
}

এই CSS নিয়ম একটি ওয়েব পেজের সব h1 এলিমেন্টের রং গোলাপি করে দেয়। আমাদের নিয়মের দুটি উপাদান:

• h1, যে এলিমেন্টে আমাদের স্টাইল প্রয়োগ হবে। এটিকে সিলেক্টর বলা হয়।
• color: pink, আমাদের সিলেক্টরের এলিমেন্টগুলোর ওপর প্রয়োগ হওয়া স্টাইল। এটিকে ডিক্লেয়ারেশন বলা হয়। এই উদাহরণে, আমরা সব h1 এলিমেন্টের রং গোলাপি করেছি।

CSS সিলেক্টর ওয়েব স্টাইল ডিজাইন করার একটি মৌলিক অংশ। সিলেক্টরগুলো আপনাকে ব্রাউজারকে বলতে দেয় যে কোন এলিমেন্টগুলো একটি নির্দিষ্ট স্টাইল ব্যবহার করবে। উদাহরণস্বরূপ, আপনার একটি সিলেক্টর থাকতে পারে যা ব্রাউজারকে নির্দেশ করবে সকল <h1> এলিমেন্ট বা সকল <p> এলিমেন্ট স্টাইল করতে।

CSS সিলেক্টর টাইপসমূহ

CSS বিস্তৃত পরিসরের সিলেক্টর অফার করে। চলুন আপনি CSS নিয়ম ডিজাইন করার সময় 마주 করতে পারেন এমন প্রধান সিলেক্টরগুলোর উদাহরণ এক্সপ্লোর করি।

CSS এলিমেন্ট-বেসড সিলেক্টর

এলিমেন্ট-বেসড সিলেক্টর আপনাকে একটি ডকুমেন্টের একটি এলিমেন্টের সব ইনস্ট্যান্সে একটি স্টাইল প্রয়োগ করতে দেয় যেগুলো একটি নিয়মের সাথে মিলে যাবে। উদাহরণস্বরূপ, আপনি একটি পেজের সব <p> ট্যাগে একটি স্টাইল প্রয়োগ করতে এলিমেন্ট সিলেক্টর ব্যবহার করতে পারেন।

ধরুন, আমরা একটি ওয়েব পেজের সব প্যারাগ্রাফ-ভিত্তিক টেক্সটের রং স্লেটি করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

p {
  color: gray;
}

আমাদের "p" সিলেক্টরের ভেতরের ডিক্লেয়ারেশনগুলো আমাদের ওয়েব পেজের সব প্যারাগ্রাফ (HTML <p> ট্যাগ) প্রয়োগ হবে।

CSS id সিলেক্টর

CSS id সিলেক্টর একটি HTML এলিমেন্টকে পেজে তার আইডি অনুযায়ী সিলেক্ট করে। HTML আইডিগুলো ইউনিক হয় তাই id সিলেক্টর একটি ওয়েব পেজের একক এলিমেন্টে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। ID সিলেক্টরার সিনট্যাক্স হলো একটি হ্যাশ সাইন তারপর এলিমেন্ট আইডি।

ধরুন, আমরা আমাদের পেজের "box9" নামক একটি এলিমেন্টের CSS height অ্যাট্রিবিউটের মান ১৫০px সেট করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

#box9 {
  height: 150px;
}

এই নিয়ম আইডি "box9" সহ এলিমেন্টের উচ্চতা ১৫০px করবে।

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

CSS ক্লাস সিলেক্টর সেই এলিমেন্টগুলো খুঁজে বের করে যাদের একটি নির্দিষ্ট ক্লাস অ্যাট্রিবিউট রয়েছে। ক্লাস সিলেক্টরার সিনট্যাক্স হলো একটি পিরিয়ড (.) এবং তারপর আপনি যে ক্লাসের নাম সিলেক্ট করতে চান।

তাই, আপনি যদি "boxMiddle" ক্লাস টার্গেট করতে চান, তবে আপনি ".boxMiddle" সিলেক্টর ব্যবহার করবেন।

ধরুন, আমরা আমাদের ওয়েব পেজে একটি বক্স ডিজাইন করছি। বক্সটির গোলাপি পটভূমির রং থাকবে। আমাদের বক্সকে "pinkBox" ক্লাস এসাইন করা হয়েছে, যাতে আমরা আমাদের স্টাইল প্রয়োগ করতে পারি। নিচে সেই কোডটি দেওয়া হলো যা pinkBox ক্লাসযুক্ত এলিমেন্টগুলোর রং গোলাপি করবে:

.pinkBox {
  color: pink;
}

ওয়েব পেজের প্রতিটি "pinkBox" ক্লাসযুক্ত এলিমেন্ট গোলাপি হয়ে যাবে।

অতিরিক্তভাবে, আপনি নির্দিষ্ট করতে পারেন যে শুধু নির্দিষ্ট এলিমেন্টগুলো যাদের একটি নির্দিষ্ট ক্লাস রয়েছে, সেগুলোই একটি স্টাইল দ্বারা প্রভাবিত হবে। শুধু ক্লাস সিলেক্টর ব্যবহার করলে, একটি নির্দিষ্ট ক্লাস সম্পন্ন সব এলিমেন্ট আপনার সংজ্ঞায়িত স্টাইল দ্বারা প্রভাবিত হবে।

আমরা যদি একটি এলিমেন্ট টাইপের আগে ক্লাস সিলেক্টর ব্যবহার করি, তবে আমরা শুধু নির্দিষ্ট এলিমেন্টগুলোর ওপর একটি স্টাইল প্রয়োগ করতে পারি যাদের একটি নির্দিষ্ট ক্লাস রয়েছে। ধরুন, আমরা চাই প্রতিটি HTML <div> ট্যাগ যাদের "pinkBox" ক্লাস রয়েছে, তাদের পটভূমির রং গোলাপি হোক। এর জন্য স্টাইল হবে নিচের মত:

div.pinkBox {
  color: pink;
}

এই স্টাইল শুধু "pinkBox" ক্লাসযুক্ত প্রতিটি <div> ট্যাগে প্রয়োগ হবে।

CSS ইউনিভার্সেল সিলেক্টর

CSS ইউনিভার্সেল সিলেক্টর একটি ওয়েব পেজের সব এলিমেন্ট সিলেক্ট করে। সিলেক্টরটি একটি অ্যাস্ট্রিস্ক (*) দিয়ে চিহ্নিত করা হয়, যার পাশে কোনো এলিমেন্টের নাম নেই। এটি প্রায়শই একটি ওয়েব পেজের জন্য মার্জিন বা ডিফল্ট ফন্ট সেট করার জন্য ব্যবহৃত হয়।

ধরুন, আমরা চাই একটি ওয়েব পেজের সব এলিমেন্ট পেজের giữaে এলাইন হোক। আমরা নিচের কোড ব্যবহার করে এই স্টাইল আমাদের ওয়েব পেজে প্রয়োগ করতে পারি:

* {
  text-align: center;
}

এই নিয়ম "text-align: center;" স্টাইলটি একটি ওয়েব পেজের প্রতিটি আইটেমে প্রয়োগ করে।

CSS ডিসেন্ডেন্ট সিলেক্টর

CSS ডিসেন্ডেন্ট সিলেক্টর এমন একটি এলিমেন্ট সিলেক্ট করে যা অন্য একটি এলিমেন্টের ডিসেন্ডেন্ট (সন্তান), যেটির ওপর স্টাইল প্রয়োগ হবে। সিনট্যাক্স হলো একটি এলিমেন্ট নির্দিষ্ট করা, তারপর একটি স্পেস, তারপর আপনি যে ডিসেন্ডেন্ট এলিমেন্ট সিলেক্ট করতে চান।

ধরুন, আপনি একটি লিস্টের সব লিংকের পটভূমির রং হলুদ করতে চান। কিন্তু, আপনি চান এই স্টাইল ওয়েব পেজের অন্য কোনো লিংকে প্রয়োগ হবে না। আপনি নিচের কোড ব্যবহার করে এটি করতে পারেন:

li a {
  background-color: yellow;
}

এই স্টাইল "li a" ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করে। এর মানে আমরা যা স্টাইল তৈরি করেছি সেটি শুধু HTML <li> ট্যাগের ভেতরের সব <a> ট্যাগে প্রয়োগ হবে। আমাদের স্টাইল আমাদের ওয়েব পেজে প্রদর্শিত অন্য যেকোনো <a> ট্যাগে প্রয়োগ হবে না।

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

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

ধরুন, আমাদের একই স্টাইল নিয়মের সাথে দুটি CSS নিয়ম রয়েছে। সেগুলো নিচের মত:

h2 {
  text-align: center;
}
.alignCenter {
  text-align: center;
}

আমরা আমাদের কোড আরও পঠনযোগ্য করতে এই দুটি নিয়মকে একটি সিলেক্টর লিস্টে মিলিয়ে দিতে পারি। আমরা আমাদের স্টাইলগুলোর মধ্যে একটি কমা যোগ করে এটি করতে পারি:

h2, .alignCenter {
  text-align: center;
}

এই কোড আমাদের প্রথম উদাহরণের মতই কাজ করে। তবে, আমাদের দ্বিতীয় উদাহরণ একটি সিলেক্টর লিস্ট ব্যবহার করে যা আমাদের কোডকে আরও সংক্ষিপ্ত করে।

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

CSS গ্রুপিং সিলেক্টর একাধিক সিলেক্টরের ওপর একটি সেট স্টাইল প্রয়োগ করে। এটি পুনরাবৃত্তি কমাতে এবং আপনাকে ক্লিন কোড লিখতে সাহায্য করে। সিনট্যাক্স হলো এলিমেন্ট সিলেক্টরদের একটি লিস্ট কমা দিয়ে বিভক্ত, তারপর আপনি যেসব CSS নিয়ম এলিমেন্টগুলোর ওপর প্রয়োগ করতে চান।

ধরুন, আমরা একটি ওয়েব পেজ ডিজাইন করছি যেটি নিচের স্টাইলগুলো ব্যবহার করে:

h1 {
  text-align: center;
  font-size: 32px;
  font-weight: normal;
}
h2 {
  text-align: center;
  font-size: 24px;
  font-weight: normal;
}
h3 {
  text-align: center;
  font-size 18px;
  font-weight: normal;
}

এই কোডে, "font-weight: normal;" এবং "text-align: center;" স্টাইলগুলো সব সিলেক্টর দ্বারা শেয়ার করা হয়েছে। আমাদের কোডে পুনরাবৃত্তি কমাতে আমরা এই স্টাইলগুলো গ্রুপিং সিলেক্টর ব্যবহার করে একসাথে গ্রুপ করতে পারি। এই কাজের জন্য আমরা যে কোডটি ব্যবহার করব সেটি নিচে:

h1, h2, h3 {
  text-align: center;
  font-weight: normal;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 18px;
}

আমরা দুটি স্টাইল, text-align এবং font-weight, একসাথে গ্রুপ করেছি যেগুলো সব ট্যাগে একই ছিল। এটি আমাদের কোড আরও পঠনযোগ্য করতে সাহায্য করেছে।

উপসংহার

CSS সিলেক্টর আপনাকে একটি নির্দিষ্ট এলিমেন্ট বা ওয়েব পেজের এলিমেন্টের পরিসরে একটি স্টাইল প্রয়োগ করতে দেয়। CSS ব্যাপক পরিসরের সিলেক্টর অফার করে। এগুলোতে আইডি সিলেক্টর, ক্লাস সিলেক্টর, এবং গ্রুপিং সিলেক্টর রয়েছে যা আপনি সুনির্দিষ্ট CSS স্টাইল তৈরি করতে ব্যবহার করতে পারেন।

এই আর্টিকেলটি CSS-এ সিলেক্টরর কেবল поверхেই স্পর্শ করেছে। CSS-এ আরও অ্যাট্রিবিউট সিলেক্টর, পসিডো-ক্লাস এবং পসিডো-এলিমেন্ট, কম্বিনেটর, এবং অন্যান্য সিলেক্টর রয়েছে যেগুলো ব্যবহার করা হয়। আপনি যদি আরও অ্যাডভান্সড নিয়ম ডেভেলপ করতে চান, তবে আপনি এই সিলেক্টরগুলো গভীরে গিয়ে রিসার্চ করতে পারেন।

এই টিউটোরিয়ালে উদাহরণসহ CSS-এ সবচেয়ে সাধারণভাবে ব্যবহৃত সিলেক্টর কীভাবে ব্যবহার করবেন তা আলোচনা করা হয়েছে। এখন আপনার কাছে CSS সিলেক্টর ব্যবহার করে স্টাইল তৈরি করার এক্সপার্টের মতো জ্ঞান রয়েছে।

শীর্ষ CSS শিক্ষামূলক সংস্থান, কোর্স, এবং বই সম্পর্কে পরামর্শের জন্য আমাদের How to Learn CSS গাইড দেখুন।