CSS :active Pseudo-class: สไตล์เมื่อผู้ใช้คลิกองค์ประกอบ

เมื่อออกแบบเว็บไซต์ คุณอาจต้องการนำสไตล์ไปใช้กับองค์ประกอบเมื่อผู้ใช้ เปิดใช้งาน (activate) เช่น เปลี่ยนสีปุ่มหรือลิงก์เมื่อผู้ใช้คลิก

นั่นคือที่มาของ CSS :active pseudo-class ซึ่งเลือกองค์ประกอบที่ถูกเปิดใช้งานโดยผู้ใช้ เพื่อนำสไตล์ไปใช้

บทเรียนนี้อธิบายพื้นฐาน CSS pseudo-classes และการใช้ :active pseudo-class พร้อมตัวอย่าง จนจบคุณจะใช้ :active อย่างเชี่ยวชาญ

CSS Pseudo-classes คืออะไร?

ใน CSS selectors ใช้เลือกองค์ประกอบที่จะนำสไตล์ไปใช้ เช่น selector อาจเลือกทุก <h1> หรือ <select> tags

บ่อยครั้งที่ต้องการนำสไตล์ไปใช้เฉพาะเมื่อองค์ประกอบอยู่ในสถานะพิเศษ เช่น ถูกคลิก หรือ hover นั่นคือที่มาของ pseudo-classes

Pseudo-classes คือคีย์เวิร์ดเพิ่มเข้าไปใน selector เพื่อเลือกองค์ประกอบเฉพาะเมื่ออยู่ในสถานะหนึ่งๆ บทเรียนนี้เน้นที่ :active pseudo-class

CSS :active Pseudo-class

:active pseudo-class เลือกองค์ประกอบที่ กำลังถูกเปิดใช้งานโดยผู้ใช้ ในทาง CSS "activate" หมายถึงเมื่อผู้ใช้กดปุ่มเมาส์ลงบนองค์ประกอบ (ระหว่างกดค้าง ไม่ได้ปล่อย)

:active มักใช้กับ <a> (ลิงก์) และ <button> (ปุ่ม) เช่น เปลี่ยนสีลิงก์เป็นแดงเมื่อคลิก หรือเปลี่ยนสีพื้นหลังปุ่มเป็นน้ำเงินอ่อนเมื่อคลิก

เมื่อผู้ใช้ปล่อยการคลิก องค์ประกอบจะไม่ได้อยู่ในสถานะ "active" อีกต่อไป จึงไม่ถูกเลือกโดย :active selector

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

1. Active Links (ลิงก์ที่ถูกคลิก)

สมมติออกแบบหน้า "About" สำหรับคลับการ์ด "Wizards of the Boards" มีลิงก์ไปหน้ารายการเกม ควรแสดงสีฟ้าอ่อนปกติ แต่เมื่อคลิกควรเปลี่ยนเป็นสีส้ม

<html>
  <p>Wizards of the Boards is a Philadelphia, PA-based card game club... 
     To learn more about the games we play, <a href="/games.html">click here</a>.</p>
</html>

<style>
  a { color: lightblue; }
  a:active { color: orange; }
</style>

ใน HTML มีแท็ก <a> ลิงก์ไป "games.html" 触发เมื่อคลิกข้อความ "click here" ใน CSS มี 2 กฎ: 1) กำหนดสีลิงก์ปกติเป็น lightblue 2) ใช้ a:active กำหนดสีเป็น orange เมื่อคลิก

2. Active Buttons (ปุ่มที่ถูกคลิก)

สร้างปุ่ม "Submit Your Interest" เมื่อคลิก ต้องมีขอบสีส้มกว้าง 3px

<html>
  <button>Submit Your Interest</button>
</html>

<style>
  button:active { border: 3px solid orange; }
</style>

ใน HTML มีแท็ก <button> ข้อความ "Submit Your Interest" ใน CSS มี 1 กฎใช้ button:active สร้างขอบสีส้ม 3px solid เฉพาะเมื่อปุ่ม active เมื่อปล่อยคลิก ขอบจะหายไป

สรุป

CSS :active pseudo-class เลือกองค์ประกอบในสถานะ "active" (ระหว่างกดเมาส์) เมื่อเลือกแล้วสามารถนำสไตล์ไปใช้ได้

:active มักใช้กับ <a> และ <button> เพื่อสร้างเอฟเฟกต์เมื่อคลิกลิงก์หรือปุ่ม ตอนนี้คุณพร้อมใช้ :active pseudo-class อย่างเชี่ยวชาญแล้ว!