Pseudo-Classes คืออะไร?
Pseudo-Classes เป็นส่วนหนึ่งของ CSS ที่ช่วยให้เราสามารถกำหนดรูปแบบ (styles) ให้กับองค์ประกอบในสถานะพิเศษ เช่น เมื่อมีการโต้ตอบกับผู้ใช้ (Hover, Focus) หรือในสถานะเฉพาะ (Active, Disabled) ใน Tailwind CSS การใช้งาน Pseudo-Classes นั้นง่ายและสะดวกผ่าน Utility Classes ที่มีอยู่ในตัว
1. การใช้งาน Hover
Tailwind CSS รองรับการปรับแต่งสไตล์เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบด้วยคลาส hover:
ตัวอย่าง:
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
ปุ่มเปลี่ยนสีเมื่อ Hover
</button>
ในตัวอย่างนี้:
bg-blue-500: สีพื้นหลังปกติhover:bg-blue-700: เปลี่ยนสีพื้นหลังเป็นน้ำเงินเข้มเมื่อวางเมาส์
2. การใช้งาน Focus
Focus ใช้เพื่อกำหนดสไตล์ให้กับองค์ประกอบที่อยู่ในสถานะโฟกัส (เช่น Input หรือ Button ที่ถูกเลือก) โดยใช้คลาส focus:
ตัวอย่าง:
<input class="border border-gray-300 rounded focus:border-blue-500 focus:ring-2 focus:ring-blue-300 px-4 py-2" type="text" placeholder="กรอกข้อมูล">
ในตัวอย่างนี้:
focus:border-blue-500: เปลี่ยนสีขอบเมื่อ Input อยู่ในสถานะโฟกัสfocus:ring-2 focus:ring-blue-300: เพิ่มวงแหวนรอบ Input เมื่อโฟกัส
3. การใช้งาน Active
Active ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบที่ถูกคลิกหรืออยู่ในสถานะถูกกด โดยใช้คลาส active:
ตัวอย่าง:
<button class="bg-green-500 text-white px-4 py-2 rounded active:bg-green-700">
ปุ่มเปลี่ยนสีเมื่อ Active
</button>
ในตัวอย่างนี้:
active:bg-green-700: เปลี่ยนสีพื้นหลังเมื่อปุ่มถูกกด
4. การใช้งาน Disabled
Disabled ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบที่อยู่ในสถานะไม่พร้อมใช้งาน โดยใช้คลาส disabled:
ตัวอย่าง:
<button class="bg-gray-500 text-white px-4 py-2 rounded disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
ปุ่ม Disabled
</button>
ในตัวอย่างนี้:
disabled:bg-gray-300: เปลี่ยนสีพื้นหลังเมื่อปุ่มถูกปิดการใช้งานdisabled:cursor-not-allowed: เปลี่ยนเคอร์เซอร์เป็นเครื่องหมายห้าม
5. การใช้งาน Group และ State ภายในกลุ่ม
Tailwind CSS มีคลาส group เพื่อจัดการสถานะขององค์ประกอบหลายตัวที่อยู่ในกลุ่มเดียวกัน
ตัวอย่าง:
<div class="group">
<button class="bg-gray-500 text-white px-4 py-2 rounded group-hover:bg-gray-700">
ปุ่มในกลุ่ม
</button>
</div>
ในตัวอย่างนี้:
group-hover:bg-gray-700: เปลี่ยนสีพื้นหลังของปุ่มเมื่อผู้ใช้วางเมาส์เหนือกลุ่ม (group)
6. การใช้งาน Even และ Odd
Tailwind CSS ช่วยให้คุณกำหนดสไตล์สำหรับแถวที่มีเลขคู่ (even:) และเลขคี่ (odd:) ในตารางหรือรายการได้
ตัวอย่าง:
<table class="w-full border-collapse">
<tr class="odd:bg-gray-100 even:bg-gray-200">
<td class="p-4">แถวที่ 1</td>
</tr>
<tr class="odd:bg-gray-100 even:bg-gray-200">
<td class="p-4">แถวที่ 2</td>
</tr>
</table>
7. การใช้งาน First และ Last
คุณสามารถกำหนดสไตล์เฉพาะสำหรับองค์ประกอบแรก (first:) และองค์ประกอบสุดท้าย (last:) ได้
ตัวอย่าง:
<ul class="list-none">
<li class="first:font-bold last:text-red-500">รายการที่ 1</li>
<li>รายการที่ 2</li>
<li class="first:font-bold last:text-red-500">รายการที่ 3</li>
</ul>
8. การใช้งาน Checked
Checked ใช้สำหรับกำหนดสไตล์ให้กับ Checkbox หรือ Radio Button ที่ถูกเลือก โดยใช้คลาส checked:
ตัวอย่าง:
<label class="inline-flex items-center">
<input type="checkbox" class="checked:bg-blue-500">
<span class="ml-2">ตัวเลือก</span>
</label>
9. การใช้งาน Not-First และ Not-Last
สำหรับการกำหนดสไตล์ให้กับองค์ประกอบที่ไม่ใช่อันแรกหรืออันสุดท้ายในกลุ่ม คุณสามารถใช้ not-first: และ not-last:
ตัวอย่าง:
<div class="flex space-x-4">
<div class="not-first:bg-gray-300 p-4">1</div>
<div class="not-first:bg-gray-300 p-4">2</div>
<div class="not-first:bg-gray-300 p-4">3</div>
</div>
10. การจัดการโครงสร้างซับซ้อนด้วย Pseudo-Classes
Pseudo-Classes ใน Tailwind CSS ยังรองรับการจัดการโครงสร้างที่ซับซ้อน เช่น peer และ peer-* สำหรับควบคุมองค์ประกอบอื่นที่อยู่ในกลุ่มเดียวกัน
ตัวอย่าง:
<div>
<input type="checkbox" id="toggle" class="peer hidden">
<label for="toggle" class="bg-gray-500 text-white px-4 py-2 rounded cursor-pointer peer-checked:bg-blue-500">
เปิด/ปิด
</label>
</div>
ในตัวอย่างนี้:
- เมื่อ Checkbox ถูกเลือก (
peer-checked), สีพื้นหลังของlabelจะเปลี่ยนเป็นสีน้ำเงิน
ตัวอย่างการใช้งานจริง
เมนูแบบ Interactive:
<nav class="flex gap-4">
<a href="#" class="text-gray-500 hover:text-blue-500">หน้าแรก</a>
<a href="#" class="text-gray-500 hover:text-blue-500">เกี่ยวกับ</a>
<a href="#" class="text-gray-500 hover:text-blue-500">ติดต่อเรา</a>
</nav>
ฟอร์มแบบโต้ตอบ:
<form class="space-y-4">
<input type="text" class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 px-4 py-2 rounded w-full" placeholder="ชื่อของคุณ">
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700 focus:ring-2 focus:ring-green-300">
ส่งข้อมูล
</button>
</form>
สรุป
Pseudo-Classes ใน Tailwind CSS ช่วยเพิ่มความโต้ตอบให้กับหน้าเว็บของคุณได้ง่ายและรวดเร็ว ไม่ว่าจะเป็นการสร้างเอฟเฟกต์แบบ Hover, Focus, หรือ Active คุณสามารถปรับแต่งการแสดงผลให้เหมาะสมกับสถานะต่าง ๆ ได้อย่างเต็มที่ ในบทต่อไป เราจะพูดถึง การใช้งาน Plugins ใน Tailwind CSS เพื่อเพิ่มความสามารถเพิ่มเติมให้กับโปรเจกต์ของคุณ!