CSS class vs ID তুলনা করলে, পার্থক্য হলো CSS class একটি স্টাইল একাধিক এলিমেন্টে অ্যাপ্লাই করে। ID, অন্যদিকে, একটি স্টাইল একটি ইউনিক এলিমেন্টে অ্যাপ্লাই করে। ID আরও 스페সিয়াল কারণ আপনি একটি স্পেশাল URL ব্যবহার করে সরাসরি একটি এলিমেন্টে লিংক করতে পারেন এবং এটি JavaScript-এ ব্যবহার করা হয়।
CSS-এ, সিলেক্টরগুলো একটি নির্দিষ্ট এলিমেন্ট বা একটি র্যাঞ্জের এলিমেন্টকে টার্গেট করার জন্য একটি ওয়েব পেজে ব্যবহার করা হয়। একবার একটি এলিমেন্ট টার্গেটেড হলে, একটি স্টাইল বা স্টাইল সেট এলিমেন্টে অ্যাপ্লাই করা যেতে পারে।
ব্যবহারযোগ্য সিলেক্টরদের একটি বিস্তৃত র্যাঞ্জ রয়েছে। 그중 দুটি সবচেয়ে বেশি ব্যবহৃত হলো class এবং ID। উভয়ই এলিমেন্ট টার্গেট করার জন্য ব্যবহৃত হয় যেগুলোর ওপর একটি স্টাইল অ্যাপ্লাই করা উচিত।
CSS Class vs ID সিলেক্টর
class এবং ID সিলেক্টরের মধ্যে পার্থক্য কী? এটি বহু ডেভেলপার করেও জানতে চান যারা CSS-এ নতুন, এবং একটা যা আমরা এই গাইডে উত্তর দিব।
এই গাইড পড়া শেষ করার মধ্যে, আপনি এই দুটি সিলেক্টরের পার্থক্যগুলো জানবেন। আপনার কোডে কোন সিলেক্টর ব্যবহার করবেন সেটি সম্পর্কে একটি ইনফর্মড সিদ্ধান্ত নেওয়ার জন্য আপনার দরকার ইনফরমেশন থাকবে। চলুন শুরু করি।
CSS সিলেক্টরস
একটি ওয়েব পেজ ডিজাইন করার সময়, আপনি চাইবেন নির্দিষ্ট স্টাইলগুলো পেজের নির্দিষ্ট এলিমেন্টগুলোর ওপর অ্যাপ্লাই হয়। উদাহরণস্বরূপ, আপনি সকল <p> ট্যাগের টেক্সট কালার গ্রিন সেট করতে চাইতে পারেন বা একটি হেডারের ফন্ট সাইজ পরিবর্তন করতে চাইতে পারেন।
সিলেক্টরগুলো আপনাকে একটি ওয়েব পেজের নির্দিষ্ট এলিমেন্ট টার্গেট করতে দেয় যেগুলোর ওপর আপনি স্টাইল অ্যাপ্লাই করতে পারেন। CSS-এ, অনেক সিলেক্টর উপলব্ধ, যেমন ইউনিভার্সাল সিলেক্টর, ডিসেন্ডেন্ট সিলেক্টর, চাইল্ড সিলেক্টর, এবং গ্রুপিং সিলেক্টর। আপনি যদি CSS সিলেক্টর সম্পর্কে আরও জানতে চান, তবে আমাদের বিগিনার গাইড টু CSS সিলেক্টর পড়ুন।
দুই সিলেক্টর, class এবং id, একটি HTML এলিমেন্টে এসাইন করা ক্লাস এবং ID-এর ভিত্তিতে এলিমেন্টগুলোর ওপর স্টাইল অ্যাপ্লাই করার জন্য ব্যবহৃত হয়। কিন্তু এই সিলেক্টরগুলো প্রায়শই কনফিউজড হয়, তাই চলুন প্রতিটা কীভাবে কাজ করে সেটি এক্সপ্লোর করি।
ID সিলেক্টর ইউনিক
id সিলেক্টর আপনাকে স্টাইল রুল ডিফাইন করতে দেয় যা একটি ওয়েব পেজে একটি সিঙ্গল এলিমেন্টে অ্যাপ্লাই হয়। প্রতিটি ওয়েব পেজে শুধু একটি এলিমেন্ট থাকতে পারে একটি সিঙ্গল ID অ্যাট্রিবিউটের সাথে। এর মানে ID সিলেক্টর কখনো একাধিক এলিমেন্ট স্টাইল করতে ব্যবহার করা যাবে না।
ID সিলেক্টরগুলো একটি হ্যাশ সাইন ব্যবহার করে ডিফাইন করা হয়। সেগুলো অবিলম্বে ID মান দ্বারা ফলো করা হয় যেটিতে আপনি একটি স্টাইল রুল সেট অ্যাপ্লাই করতে চান। এখানে ID সিলেক্টর একশনের একটি উদাহরণ:
<html> <p id="betaBanner">This is a banner.</p> <style> #betaBanner { color: white; background-color: orange; }
এই স্টাইল আমাদের HTML ডকুমেন্টের <p> এলিমেন্টে অ্যাপ্লাই হয় যেটির ID betaBanner। স্টাইলটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার অরেঞ্জ এবং এলিমেন্টের টেক্সটের কালার হোয়াইট সেট করবে।
Class সিলেক্টর ইউনিক নয়
একটি class সিলেক্টর আপনাকে স্টাইল রুল ডিফাইন করতে দেয় যেগুলো যেকোনো এলিমেন্টে অ্যাপ্লাই হবে যার ক্লাস অ্যাট্রিবিউট একটি নির্দিষ্ট মানের সমান।
আমরা আগে আলোচনা করেছি, ID সিলেক্টর শুধু একটি এলিমেন্ট স্টাইল করতে ব্যবহার করা যাবে। এর কারণ IDs একটি ওয়েব পেজে শুধু একবার ব্যবহার করা যাবে। Classes, অন্যদিকে, একাধিক এলিমেন্টে ব্যবহার করা যাবে। তাই, আপনি যদি একটি ক্লাস সিলেক্টর ব্যবহার করে একটি স্টাইল অ্যাপ্লাই করেন, তবে সেই ক্লাস শেয়ার করা যেকোনো এলিমেন্ট আপনার ডিফাইন করা স্টাইলগুলোর অধীন থাকবে।
Class সিলেক্টরগুলো একটি পিরিয়ড ব্যবহার করে ডিফাইন করা হয়, ফলো করা হয় ক্লাসের মান দ্বারা যেটিতে আপনি একটি স্টাইল সেট অ্যাপ্লাই করতে চান। এখানে ক্লাস সিলেক্টর একশনের একটি উদাহরণ:
<html> <p class="orangeBackground">This is a banner.</p> <div class="orangeBackground">This is a banner.</div> <style> .orangeBackground { background-color: orange; }
এই স্টাইল আমাদের <p> ট্যাগের ব্যাকগ্রাউন্ড কালার অরেঞ্জ সেট করে। এছাড়া, স্টাইল আমাদের <div> ট্যাগের ব্যাকগ্রাউন্ড কালারও অরেঞ্জ সেট করে। এর কারণ উভয় ট্যাগই একই ক্লাস নাম শেয়ার করে: orangeBackground।
এছাড়া, একটি ওয়েব এলিমেন্ট একাধিক ভিন্ন ক্লাস শেয়ার করতে পারে। তাই, আপনি যদি একটি large নামে ক্লাস আমাদের উপরের <div> ট্যাগে অ্যাপ্লাই করতে চান, তবে আপনি নিচের কোড ব্যবহার করে সেটি করতে পারেন:
<html> <div class="orangeBackground large">This is a banner.</div>
এই কোডে, orangeBackground এবং large ক্লাসের জন্য ডিফাইন করা যেকোনো স্টাইল রুল আমাদের ওয়েব এলিমেন্টে অ্যাপ্লাই হবে। একটি ID-র সাথে, অন্যদিকে, আমরা এই বিহেভিয়ার রেপ্লিকেট করতে পারতাম না, কারণ প্রতিটি এলিমেন্টের শুধু একটি ID থাকতে পারে।
IDs-র একটি ইউনিক ব্রাউজার ফাংশন আছে
আমরা এখন পর্যন্ত আলোচনা করেছি IDs শুধু একটি এলিমেন্টে স্টাইল অ্যাপ্লাই করতে পারে। ক্লাসের বিপরীতে যেগুলো একাধিক এলিমেন্টে স্টাইল অ্যাপ্লাই করতে পারে। এটি ক্লাস এবং ID সিলেক্টরের মধ্যে একমাত্র পার্থক্য নয়।
ব্রাউজারে, ক্লাসগুলোর কোনো স্পেশাল ফাংশন নেই। তাদের প্রধান উদ্দেশ্য হলো আপনাকে একটি ওয়েব পেজের একটি র্যাঞ্জের এলিমেন্টে স্টাইল অ্যাপ্লাই করতে দেওয়া। IDs, অন্যদিকে, ব্রাউজার দ্বারা ব্যবহার করা যেতে পারে একটি ওয়েব পেজের একটি নির্দিষ্ট অংশে নেভিগেট করার জন্য।
আপনি যদি একটি এলিমেন্টকে একটি ID অ্যাসাইন করেন, তবে আপনি একটি স্পেশাল URL ব্যবহার করে সরাসরি সেই এলিমেন্টে লিংক করতে পারেন। এই বিহেভিয়ার কাজ করে কারণ IDs একটি ওয়েব পেজে ইউনিক।
ধরুন আমরা আমাদের ওয়েবসাইটের একটি লিংক পাঠাতে চাই যা ইউজারকে অটোমেটিক্যালি একটি হেডারের দিকে স্ক্রোল করবে। আমরা নিচের কোড ব্যবহার করে সেটি করতে পারি:
<h3 id="section3">Section Three</h3>
এই কোডে, আমরা <h3> ট্যাগে একটি ID অ্যাসাইন করেছি যেটি টেক্সট Section Three ধারণ করে। এখন, আমরা একটি ইউজারকে একটি ডায়रेक्ट লিংক পাঠাতে পারি যা সেটাকে সেই এলিমেন্টে ওয়েব পেজে স্ক্রোল করবে। এটি নিচের URL ব্যবহার করে করা হয়:
https://domain.com/index.html#section3
যখন একজন ইউজার এই URL-এ নেভিগেট করবে, (যেখানে domain.com আপনার ওয়েবসাইটের URL), তারা ID section3 সম্পন্ন হেডিং-এ স্ক্রোল করবে। এই বিহেভিয়ার ক্লাসের ওপর প্রয়োগ হয় না।
IDs JavaScript-এ ব্যবহার করা হয়
আপনার যদি JavaScript ব্যবহার করার কোনো অভিজ্ঞতা থাকে, তবে আপনি জানবেন IDs সেখানে সাধারণত ব্যবহার করা হয়। getElementById ফাংশন আপনাকে একটি ওয়েব পেজের একটি এলিমেন্ট সিলেক্ট করতে দেয়। এটি এই ফ্যাক্টের ওপর নির্ভর করে যে শুধু একটি এলিমেন্ট একই ID শেয়ার করতে পারে।
Classes, অন্যদিকে, একটি ওয়েব পেজে একাধিক এলিমেন্ট রিফ্লেক্ট করতে পারে। সেগুলো উপযোগী নয় যদি আপনি JavaScript-এ একটি নির্দিষ্ট এলিমেন্টের সাথে কাজ করতে চান।
আপনি ID এবং CSS Class সিলেক্টর দুটোই ব্যবহার করতে পারেন
HTML-এ ऐसा কোনো রুল নেই যা আপনাকে একটি এলিমেন্টে একসাথে একটি ID এবং একটি ক্লাস অ্যাসাইন করতে বাধা দেয়।
"ক্যারিয়ার করমা আমার জীবনে তখন প্রবেশ করলো যখন আমার সেটি সবচেয়ে বেশি দরকার ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মিলিয়ে দিলো। গ্র্যাজুয়েট হওয়ার দুই মাস পর, আমার সপনোর চাকরি পেলাম যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যের সাথে মিলে যাচ্ছে!"
ভেনাস, সফ্টওয়্যার ইঞ্জিনিয়ার, রকবট
আপনার বুটক্যাম্প ম্যাচ খুঁজুন
ধরুন আপনি backgroundOrange নামে একটি ক্লাসের সাথে জড়িত স্টাইলগুলো একটি <div> ট্যাগে অ্যাপ্লাই করতে চান। তবে, আপনি <div>-এ কিছু ইউনিক স্টাইলও অ্যাপ্লাই করতে চান। আপনি নিচের কোড ব্যবহার করে সেটি করতে পারেন:
<div class="backgroundOrange" id="customDiv"></div>
এই <div> ট্যাগ backgroundOrange ক্লাসের জন্য স্টাইলগুলোর অধীন থাকবে। এছাড়া, এটি customDiv ID-র জন্য আইডি সিলেক্টর ব্যবহার করে অ্যাপ্লাই করা স্টাইলগুলোও ব্যবহার করবে।
উপসংহার
আপনি CSS-এ কাজ করার সময়, কোনো স্পেসifik রিজন নেই যা আপনাকে একটি ক্লাসের ওপর একটি ID ব্যবহার করতে বাধ্য করে। তবে, বেস্ট প্র্যাকটিস হলো শুধু IDs ব্যবহার করা যদি আপনি একটি স্টাইল একটি ওয়েব পেজের একটি এলিমেন্টে অ্যাপ্লাই করতে চান, এবং ক্লাস ব্যবহার করা যদি আপনি একটি স্টাইল একাধিক এলিমেন্টে অ্যাপ্লাই করতে চান।
এই টিউটোরিয়াল উদাহরণসহ আলোচনা করেছে, CSS ID এবং ক্লাস সিলেক্টরের বেসিকস, এবং দুটোর তুলনা এবং পার্থক্য করা হয়েছে। এখন আপনি CSS ID এবং ক্লাস সিলেক্টরগুলো একজন এক্সপার্ট ডেভেলপার처럼 ব্যবহার করতে প্রস্তুত!
