CSS আইডি বনাম ক্লাস:মূল পার্থক্য ব্যাখ্যা করা হয়েছে

CSS ক্লাস বনাম ID তুলনা করার সময়, পার্থক্য হল যে CSS ক্লাস একাধিক উপাদানে একটি শৈলী প্রয়োগ করে। আইডি, অন্যদিকে, একটি অনন্য উপাদানে একটি শৈলী প্রয়োগ করে। ID এছাড়াও বিশেষ যে আপনি একটি উপাদান সরাসরি লিঙ্ক করতে একটি বিশেষ URL ব্যবহার করতে পারেন এবং এটি JavaScript দ্বারা ব্যবহৃত হয়।

CSS-এ, নির্বাচকরা একটি নির্দিষ্ট উপাদান বা একটি ওয়েব পৃষ্ঠার উপাদানের পরিসরকে লক্ষ্য করতে ব্যবহৃত হয়। একবার একটি উপাদান টার্গেট করা হলে, একটি স্টাইল বা শৈলীর সেট উপাদানটিতে প্রয়োগ করা যেতে পারে।

নির্বাচকদের বিস্তৃত পরিসর পাওয়া যায়। সবচেয়ে বেশি ব্যবহৃত দুটি হল class এবং ID . উভয়ই উপাদানগুলিকে লক্ষ্য করতে ব্যবহৃত হয় যেখানে একটি শৈলী প্রয়োগ করা উচিত।

সিএসএস ক্লাস বনাম আইডি নির্বাচক

class এর মধ্যে পার্থক্য কি এবং ID নির্বাচক? এটি এমন একটি প্রশ্ন যা অনেক ডেভেলপারদের দ্বারা জিজ্ঞাসা করা হয়েছে যারা CSS-এ নতুন, এবং আমরা এই নির্দেশিকায় উত্তর দিতে যাচ্ছি।

এই নির্দেশিকাটি পড়ার শেষে, আপনি এই দুই নির্বাচকের মধ্যে পার্থক্য জানতে পারবেন। আপনার কোডে কোন নির্বাচক ব্যবহার করবেন সে সম্পর্কে একটি অবগত সিদ্ধান্ত নিতে আপনার প্রয়োজনীয় তথ্য থাকবে। শুরু করা যাক.

CSS নির্বাচক

একটি ওয়েব পৃষ্ঠা ডিজাইন করার সময়, আপনি পৃষ্ঠার নির্দিষ্ট উপাদানগুলিতে নির্দিষ্ট শৈলী প্রয়োগ করতে চান। উদাহরণস্বরূপ, আপনি সমস্ত

ট্যাগের পাঠ্যের রঙ সবুজে সেট করতে বা হেডারের ফন্টের আকার পরিবর্তন করতে চাইতে পারেন।

নির্বাচকরা আপনাকে একটি ওয়েব পৃষ্ঠায় নির্দিষ্ট উপাদানগুলিকে লক্ষ্য করার অনুমতি দেয় যেখানে আপনি শৈলী প্রয়োগ করতে পারেন। CSS-এ, অনেক নির্বাচক পাওয়া যায়, যেমন সার্বজনীন নির্বাচক, বংশধর নির্বাচক, শিশু নির্বাচক এবং গ্রুপিং নির্বাচক। আপনি যদি CSS নির্বাচকদের সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে CSS নির্বাচকদের জন্য আমাদের শিক্ষানবিস গাইড পড়ুন।

দুই নির্বাচক, class এবং id , যথাক্রমে একটি এইচটিএমএল উপাদানে বরাদ্দ করা ক্লাস এবং আইডির উপর ভিত্তি করে উপাদানগুলিতে শৈলী প্রয়োগ করতে ব্যবহৃত হয়। কিন্তু এই নির্বাচকরা প্রায়শই বিভ্রান্ত হন, তাই আসুন জেনে নেওয়া যাক প্রতিটি কীভাবে কাজ করে।

আইডি নির্বাচক অনন্য

আইডি নির্বাচক আপনাকে শৈলীর নিয়মগুলি সংজ্ঞায়িত করতে দেয় যা একটি একক-এ প্রযোজ্য ওয়েব পৃষ্ঠায় উপাদান। প্রতিটি ওয়েব পৃষ্ঠায় একটি আইডি বৈশিষ্ট্য সহ শুধুমাত্র একটি উপাদান থাকতে পারে। এর মানে আইডি নির্বাচককে কখনোই একাধিক উপাদান স্টাইল করতে ব্যবহার করা যাবে না।

আইডি নির্বাচকদের একটি হ্যাশ চিহ্ন ব্যবহার করে সংজ্ঞায়িত করা হয়। তারা অবিলম্বে আইডি মান দ্বারা অনুসরণ করা হয় যে আপনি শৈলী নিয়ম একটি সেট প্রয়োগ করতে চান. এখানে আইডি নির্বাচক কর্মের একটি উদাহরণ:

<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
 color: white;
 background-color: orange;
}

এই স্টাইলটি আমাদের HTML নথিতে betaBanner আইডি সহ

উপাদানের ক্ষেত্রে প্রযোজ্য . স্টাইলটি উপাদানটির পটভূমির রঙ কমলা এবং উপাদানটির পাঠ্যের রঙ সাদাতে সেট করবে।

শ্রেণী নির্বাচক অনন্য নয়

একটি শ্রেণী নির্বাচক আপনাকে শৈলীর নিয়মগুলি সংজ্ঞায়িত করতে দেয় যা যেকোন উপাদানে প্রযোজ্য একটি নির্দিষ্ট মানের সমান একটি শ্রেণীর বৈশিষ্ট্য সহ।

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

ক্লাস নির্বাচকদের একটি পিরিয়ড ব্যবহার করে সংজ্ঞায়িত করা হয়, তারপরে আপনি যে ক্লাসে শৈলীর একটি সেট প্রয়োগ করতে চান তার মান অনুসরণ করে। এখানে ক্লাস নির্বাচক কর্মের একটি উদাহরণ:

<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
 background-color: orange;
}

এই স্টাইলটি আমাদের

ট্যাগের পটভূমির রঙ কমলাতে সেট করে। উপরন্তু, শৈলী আমাদের

ট্যাগের পটভূমির রঙ কমলাতে সেট করে। এর কারণ উভয় ট্যাগ একই শ্রেণীর নাম ভাগ করে:orangeBackground.

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

ট্যাগে, আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>
<div class="orangeBackground large">This is a banner.</div>

এই কোডে, orangeBackground-এর জন্য যে কোনও শৈলীর নিয়ম সংজ্ঞায়িত করা হয়েছে এবং large ক্লাস আমাদের ওয়েব উপাদান প্রয়োগ করা হয়. একটি আইডি দিয়ে, অন্যদিকে, আমরা এই আচরণটি প্রতিলিপি করতে পারিনি, কারণ প্রতিটি উপাদানের শুধুমাত্র একটি আইডি থাকতে পারে।

আইডিগুলির একটি অনন্য ব্রাউজার ফাংশন আছে

এখন পর্যন্ত, আমরা এই বিষয়টি নিয়ে আলোচনা করেছি যে আইডি শুধুমাত্র একটি উপাদানে শৈলী প্রয়োগ করতে পারে। একাধিক উপাদানে শৈলী প্রয়োগ করতে পারে এমন ক্লাসের বিপরীতে। এটি ক্লাস এবং আইডি নির্বাচকদের মধ্যে একমাত্র পার্থক্য নয়।

ব্রাউজারে, ক্লাসের কোন বিশেষ ফাংশন নেই। তাদের মূল উদ্দেশ্য হল আপনাকে একটি ওয়েব পৃষ্ঠায় বিভিন্ন উপাদানে শৈলী প্রয়োগ করার অনুমতি দেওয়া। আইডি, অন্যদিকে, ব্রাউজার দ্বারা ওয়েব পৃষ্ঠার একটি নির্দিষ্ট অংশে নেভিগেট করতে ব্যবহার করা যেতে পারে।

আপনি যদি একটি উপাদানকে একটি আইডি বরাদ্দ করেন, আপনি সেই উপাদানটির সাথে সরাসরি লিঙ্ক করতে একটি বিশেষ URL ব্যবহার করতে পারেন৷ এই আচরণটি কাজ করে কারণ আইডিগুলি একটি ওয়েব পৃষ্ঠায় অনন্য।

ধরুন আমরা আমাদের ওয়েবসাইটে একটি লিঙ্ক পাঠাতে চেয়েছিলাম যা ব্যবহারকারীকে স্বয়ংক্রিয়ভাবে একটি হেডারে স্ক্রোল করে। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<h3 id="section3">Section Three</h3>

এই কোডে, আমরা

ট্যাগে একটি আইডি বরাদ্দ করেছি যাতে পাঠ্য `Section Three` রয়েছে . এখন, আমরা একজন ব্যবহারকারীকে একটি সরাসরি লিঙ্ক পাঠাতে পারি যা তাদের ওয়েব পৃষ্ঠায় সেই উপাদানটিতে স্ক্রোল করে। এটি নিম্নলিখিত URL ব্যবহার করে করা হয়:

https://domain.com/index.html#section3

যখন একজন ব্যবহারকারী এই URL-এ নেভিগেট করেন, (যেখানে domain.com হল আপনার ওয়েবসাইটের URL), তারা ID section3 সহ শিরোনামে স্ক্রোল করবে . এই আচরণ ক্লাসে প্রযোজ্য নয়।

আইডিগুলি জাভাস্ক্রিপ্ট দ্বারা ব্যবহৃত হয়

আপনার যদি জাভাস্ক্রিপ্ট ব্যবহার করার কোনো অভিজ্ঞতা থাকে, তাহলে আপনি জানতে পারবেন যে আইডিগুলি সাধারণত সেই প্রোগ্রামিং ভাষায় ব্যবহৃত হয়। getElementById ফাংশন আপনাকে একটি ওয়েব পৃষ্ঠায় একটি উপাদান নির্বাচন করতে দেয়। এটি নির্ভর করে যে শুধুমাত্র একটি উপাদান একই আইডি ভাগ করতে পারে।

ক্লাস, অন্যদিকে, একটি ওয়েব পৃষ্ঠাতে একাধিক উপাদান প্রতিফলিত করতে পারে। আপনি যদি জাভাস্ক্রিপ্টে একটি নির্দিষ্ট উপাদানের সাথে কাজ করতে চান তবে সেগুলি কার্যকর হবে না।

আপনি আইডি এবং CSS ক্লাস সিলেক্টর উভয়ই ব্যবহার করতে পারেন

HTML-এ এমন কোন নিয়ম নেই যা আপনাকে একটি আইডি এবং ক্লাস উভয়ই একটি উপাদান বরাদ্দ করতে বাধা দেয়৷

৷

CSS আইডি বনাম ক্লাস:মূল পার্থক্য ব্যাখ্যা করা হয়েছে

"ক্যারিয়ার কর্ম আমার জীবনে প্রবেশ করেছিল যখন আমার এটির সবচেয়ে বেশি প্রয়োজন ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মেলাতে সাহায্য করেছিল৷ স্নাতক হওয়ার দুই মাস পরে, আমি আমার স্বপ্নের চাকরি পেয়েছি যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যগুলির সাথে সামঞ্জস্যপূর্ণ!"

ভেনাস, রকবটের সফটওয়্যার ইঞ্জিনিয়ার

আপনার বুটক্যাম্প ম্যাচ

খুঁজুন

ধরুন আপনি backgroundOrange নামের একটি ক্লাসের সাথে যুক্ত শৈলী প্রয়োগ করতে চান একটি

ট্যাগে। যাইহোক, আপনি

-এ কয়েকটি অনন্য শৈলীও প্রয়োগ করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:

<div class="backgroundOrange" id="customDiv"></div>

এই

ট্যাগ backgroundOrange ক্লাসের শৈলীর বিষয় হবে . এছাড়াও, এটি customDiv এ প্রয়োগ করা শৈলীগুলিও ব্যবহার করবে৷ একটি আইডি নির্বাচক ব্যবহার করে আইডি৷

৷

উপসংহার

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

এই টিউটোরিয়ালে, আমরা উদাহরণের সাথে CSS আইডি এবং ক্লাস নির্বাচকদের মৌলিক বিষয় নিয়ে আলোচনা করেছি এবং আমরা দুটির তুলনা ও বৈসাদৃশ্য করেছি। এখন আপনি একজন বিশেষজ্ঞ বিকাশকারীর মতো CSS আইডি এবং ক্লাস নির্বাচকদের ব্যবহার শুরু করতে প্রস্তুত!