จริงๆ แล้วทำได้ด้วย CSS Selector :nth-child(odd) และ :nth-child(even) โดยไม่ต้องใช้ JavaScript
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Odd Even</title>
<style>
.subjectName:nth-child(odd) { color: blue; }
.subjectName:nth-child(even) { color: purple; }
</style>
</head>
<body>
<section class="subjects">
<article class="subjectName">MongoDB</article>
<article class="subjectName">Javascript</article>
<article class="subjectName">Java</article>
<article class="subjectName">MySQL</article>
</section>
</body>
</html>
คำอธิบาย
:nth-child(odd)เลือกลำดับ คี่ (1, 3, 5...):nth-child(even)เลือกลำดับ คู่ (2, 4, 6...)- เป็น CSS Pseudo-class ทำงานฝั่ง Browser เร็วกว่า JS
- รองรับ Formula:
:nth-child(3n)(ทุก 3),:nth-child(2n+1)= odd
กรณีที่ต้องใช้ JavaScript
- Logic ซับซ้อน (เช่น ขึ้นกับข้อมูลจาก Server)
- ต้อง Toggle Class แบบ Dynamic ตาม User Action
- ใช้
element.classList.add('odd')ใน Loop
ผลลัพธ์
MongoDB (สีน้ำเงิน), Javascript (สีม่วง), Java (สีน้ำเงิน), MySQL (สีม่วง)
