แอตทริบิวต์ class ใน HTML: จัดกลุ่มอิลิเมนต์สำหรับ CSS และ JavaScript

ไวยากรณ์ (Syntax)

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

สามารถใส่หลายคลัสได้ โดยคั่นด้วยช่องว่าง

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    h2.demo {
      color: orange;
      background-color: black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>ทรัพยากรการเรียนรู้</h1>
  <h2 class="demo">บทเรียนแบบข้อความ</h2>
  <h2 class="demo">บทเรียนแบบวิดีโอ</h2>
  <h2 class="demo">คำถามสัมภาษณ์และคำตอบ</h2>
  <h2 class="demo">แบบทดสอบออนไลน์</h2>
</body>
</html>

ผลลัพธ์

หัวข้อ h2 ทั้ง 4 รายการ จะมีตัวอักษรสีส้ม พื้นหลังสีดำ ระยะห่าง 10px ตาม CSS ของคลาส .demo

การใช้งานกับ CSS

/* เลือกทุกอิลิเมนต์ที่มี class="demo" */
.demo { color: red; }

/* เลือกเฉพาะ h2 ที่มี class="demo" */
h2.demo { background: black; }

/* เลือกอิลิเมนต์ที่มีทั้ง class="demo" และ "highlight" */
.demo.highlight { font-weight: bold; }

การใช้งานกับ JavaScript

// หาอิลิเมนต์แรกที่มี class="demo"
var el = document.querySelector('.demo');

// หาทุกอิลิเมนต์ที่มี class="demo"
var els = document.querySelectorAll('.demo');

// เพิ่ม/ลบ/สลับ class
element.classList.add('new-class');
element.classList.remove('demo');
element.classList.toggle('active');

แนวทางปฏิบัติที่ดี (Best Practices)

• ใช้ชื่อคลาสที่บ่งบอกความหมาย (Semantic) เช่น .btn-primary ไม่ใช่ .red-button
• ใช้ kebab-case: class="main-header" ไม่ใช่ class="mainHeader"
• หลีกเลี่ยงชื่อคลาสที่ขึ้นกับรูปลักษณ์ (Presentational)
• หนึ่งอิลิเมนต์สามารถมีหลายคลาสได้