HTML class অ্যাট্রিবিউট

class অ্যাট্রিবিউট HTML-এ একটি বা একাধিক ক্লাসনেম (class name) এলিমেন্টের জন্য সেট করতে ব্যবহৃত হয়। একই ক্লাসনেম একাধিক এলিমেন্টে ব্যবহার করা যায়। CSS-এ ক্লাস সিলেক্টর (.classname) দিয়ে স্টাইলিং এবং JavaScript-এ document.getElementsByClassName() বা querySelectorAll() দিয়ে ম্যানিপুলেশন করা যায়।

সিনট্যাক্স

<element class="classname1 classname2 ...">

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    h2.demo {
      color: orange;
      background-color: black;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>রিসোর্স</h1>
  <h2 class="demo">টেক্সট টিউটোরিয়াল</h2>
  <h2 class="demo">ভিডিও টিউটোরিয়াল</h2>
  <h2 class="demo">ইন্টারভিউ প্রশ্ন ও উত্তর</h2>
  <h2 class="demo">অনলাইন কুইজ</h2>
</body>
</html>

আউটপুট

HTML class অ্যাট্রিবিউট

ব্যাখ্যা

সব <h2> এলিমেন্টে class="demo" সেট করা হয়েছে:

<h2 class="demo">টেক্সট টিউটোরিয়াল</h2>
<h2 class="demo">ভিডিও টিউটোরিয়াল</h2>

CSS-এ .demo ক্লাস সিলেক্টর দিয়ে স্টাইল করা হয়েছে:

h2.demo {
  color: orange;
  background-color: black;
}

একাধিক ক্লাস ব্যবহার

<div class="card shadow rounded-lg p-4">কন্টেন্ট</div>

এখানে ৪টি ক্লাস: card, shadow, rounded-lg, p-4।

JavaScript-এ ক্লাস ম্যানিপুলেশন

const el = document.querySelector('.demo');
// ক্লাস যোগ
el.classList.add('active');
// ক্লাস রিমুভ
el.classList.remove('demo');
// ক্লাস টগল
el.classList.toggle('highlight');
// ক্লাস আছে কিনা চেক
el.classList.contains('demo'); // true/false

নামকরণ কনভেনশন (BEM)

Block: .card
Element: .card__title
Modifier: .card--featured, .card__title--large