เมื่อคุณออกแบบเว็บไซต์ คุณอาจต้องการนำสไตล์ไปใช้กับองค์ประกอบเมื่อเปิดใช้งานโดยผู้ใช้ ตัวอย่างเช่น คุณอาจต้องการให้สีของปุ่มหรือลิงก์เปลี่ยนไปเมื่อผู้ใช้คลิกที่ปุ่มหรือลิงก์ นั่นคือที่มาของ CSS :active pseudo-class :active pseudo-class ให้คุณเลือกองค์ประกอบที่เปิดใช้งานโดยผู้ใช้ ซึ่งคุณสามารถใช้สไตล์ได้ กวดวิชานี้จะอภิปรายพร้อมตัวอย่าง พื้นฐานของ CSS pseudo-class และวิธีที่คุณสามารถใช้ :active pseudo-class ในโค้ดของคุณ เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการใช้ :active pseudo-class คลาสหลอก CSS ใน CSS ตัวเลือกจะใช้เพื่อเลือกองค์ประกอบที่ควรใช้สไตล์หรือชุดของสไตล์ ตัวอย่างเช่น ตัวเลือกอาจเลือกแท็ก หรือ ทั้งหมดบนหน้าเว็บ ซึ่งชุดของสไตล์จะถูกนำไปใช้ บ่อยครั้งเมื่อคุณจัดรูปแบบเว็บไซต์ คุณจะต้องใช้สไตล์เฉพาะเมื่อองค์ประกอบเข้าสู่สถานะพิเศษ เช่น ถูกผู้ใช้คลิกหรือถูกวางเมาส์เหนือ นั่นคือสิ่งที่คลาสหลอกเข้ามา คลาสหลอกคือคีย์เวิร์ดที่เพิ่มลงในตัวเลือกที่ช่วยให้คุณสามารถเลือกองค์ประกอบเฉพาะเมื่อองค์ประกอบนั้นอยู่ในสถานะใดสถานะหนึ่ง สำหรับบทช่วยสอนนี้ เราจะเน้นที่ :active pseudo-class CSS :active Pseudo-class :active pseudo-class ให้คุณเลือกองค์ประกอบที่เปิดใช้งานโดยผู้ใช้ ในแง่ของ CSS "การเปิดใช้งาน" หมายถึงเมื่อผู้ใช้กดปุ่มเมาส์ลงและคลิกที่องค์ประกอบ 81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้ ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก :active pseudo-class มักใช้กับองค์ประกอบ และ ตัวอย่างเช่น คุณสามารถใช้ :active pseudo-class เพื่อเปลี่ยนสีของลิงก์เป็นสีแดงเมื่อคลิก หรือเปลี่ยนสีพื้นหลังของปุ่มเป็นสีน้ำเงินอ่อนเมื่อคลิก เมื่อผู้ใช้หยุดคลิกที่องค์ประกอบแล้ว องค์ประกอบนั้นจะไม่ "เปิดใช้งาน" อีกต่อไป ดังนั้นองค์ประกอบจะไม่ถูกเลือกโดยตัวเลือก :active เมื่อผู้ใช้หยุดคลิกที่องค์ประกอบ CSS :ตัวอย่างที่ใช้งาน มาดูสองตัวอย่างเพื่อแสดงให้เห็นว่าคุณสามารถใช้ :active pseudo-class ได้อย่างไร ลิงค์ที่ใช้งาน สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับชมรมการ์ดเกมในท้องถิ่น Wizards of the Boards เราได้รับมอบหมายให้สร้างหน้า "เกี่ยวกับ" ที่มีลิงก์ไปยังหน้าเว็บที่แสดงรายการเกมไพ่ที่สมาชิกในคลับเล่น ตามค่าเริ่มต้น ลิงก์นี้ควรปรากฏเป็นสีน้ำเงินอ่อน เมื่อคลิกลิงก์นี้ สีข้อความควรเปลี่ยนเป็นสีส้ม เพื่อให้งานนี้สำเร็จ เราสามารถใช้ :active pseudo-class นี่คือรหัสที่เราจะใช้ในการเปลี่ยนสีของข้อความของเราเมื่อมีการคลิกลิงก์: <html> <p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games. To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p> </html> <style> a { color: lightblue; } a:active { color: orange; } </style> รหัสของเราส่งคืน: ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS ในไฟล์ HTML ของเรา เราได้กำหนดย่อหน้าของข้อความโดยใช้แท็ก ซึ่งสรุปประวัติของคลับการ์ดเกม Wizards of the Boards ในแท็ก ของเรา เราได้ระบุแท็ก ซึ่งเชื่อมโยงไปยังหน้า "games.html" และจะถูกเรียกใช้เมื่อผู้ใช้คลิกที่ข้อความ "คลิกที่นี่" ในโค้ด CSS ของเรา เราได้ระบุกฎของสไตล์ไว้สองข้อ ขั้นแรก เราได้ระบุกฎที่กำหนดสีข้อความของแท็ก ทั้งหมดเป็นสีน้ำเงินอ่อน จากนั้น เราระบุกฎโดยใช้ตัวเลือก :active ซึ่งกำหนดสีข้อความของแท็ก ที่ใช้งานอยู่ทั้งหมดเป็นสีส้ม กล่าวคือ กฎนี้จะเปลี่ยนสีของลิงก์เมื่อผู้ใช้คลิกลิงก์ ปุ่มใช้งาน เรากำลังดำเนินการเกี่ยวกับแบบฟอร์มสำหรับคลับเกมไพ่ Wizards of the Boards ซึ่งช่วยให้ผู้คนส่งความสนใจไปที่สโมสรได้ ในตอนท้ายของแบบฟอร์ม เราต้องการสร้างปุ่มที่ระบุว่า "ส่งความสนใจของคุณ" เมื่อคลิกปุ่มนี้ ควรใช้เส้นขอบสีส้มกว้าง 3px รอบปุ่ม เราสามารถสร้างปุ่มนี้โดยใช้รหัสต่อไปนี้: <html> <button>Submit Your Interest</button> </html> <style> button:active { border: 3px solid orange; } </style> รหัสของเราส่งคืน: ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS มาทำลายรหัสของเรากัน ในไฟล์ HTML ของเรา เราได้กำหนดปุ่มโดยใช้แท็ก ปุ่มนี้มีข้อความ “ส่งความสนใจของคุณ” ในสไตล์ชีต CSS ของเรา เราได้กำหนดกฎหนึ่งข้อที่ใช้กับแท็ก เมื่อผู้ใช้กำหนดให้แท็กนี้ใช้งานได้ กฎนี้สร้างเส้นขอบทึบกว้าง 3px รอบปุ่มของเรา เราใช้ตัวเลือก :active เพื่อใช้กฎนี้เมื่อปุ่มทำงานเท่านั้น ดังนั้น หากเราคลิกที่ปุ่มของเรา เส้นขอบสีส้มจะปรากฏขึ้น และทันทีที่เราหยุดคลิกที่ปุ่ม เส้นขอบจะหายไป บทสรุป CSS :active pseudo-class ให้คุณเลือกองค์ประกอบเมื่ออยู่ในสถานะ "ใช้งานอยู่" เมื่อคุณเลือกองค์ประกอบที่ใช้งานอยู่แล้ว คุณจะนำสไตล์หรือชุดสไตล์ไปใช้กับองค์ประกอบได้ :active pseudo-class มักใช้กับแท็ก และแท็ก เพื่อสร้างเอฟเฟกต์ที่ทริกเกอร์เมื่อมีการคลิกลิงก์หรือปุ่มตามลำดับ บทช่วยสอนนี้กล่าวถึงพื้นฐานของ CSS pseudo-class และวิธีใช้ :active pseudo-class ตอนนี้คุณมีความรู้ที่จำเป็นในการเริ่มใช้ :active pseudo-class เหมือนผู้เชี่ยวชาญ
