คลาสหลอก คือการแสดงสถานะที่แตกต่างกันขององค์ประกอบหรือตัวเลือก css Active pseudo class คือการแสดงว่า element อยู่ในสถานะ active
คลาสหลอกนี้ส่วนใหญ่เชื่อมโยงกับลิงก์และปุ่มหรือองค์ประกอบอื่นๆ ที่สามารถใช้งานได้
ตัวอย่างเช่น หากเชื่อมโยงกับลิงก์ที่ลิงก์นั้นทำงานอยู่
ไวยากรณ์
a:active { color:green;} มาดูการใช้งานจริงของ :active pseudo class ด้วยสถานการณ์ต่างๆ ดังนี้ −
ตัวอย่าง
<html>
<head>
<style>
a:active { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html> คำอธิบาย
เมื่อคุณเห็นลิงก์ครั้งแรก ลิงก์จะแสดงด้วยสีลิงก์ปกติ (สีน้ำเงิน) และลิงก์จะเปลี่ยนเป็นสีเขียว หากเคยเข้าชมลิงก์นี้ 1 ครั้ง
ตัวอย่าง
<html>
<head>
<style>
a:active {font-size:20px;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html> คำอธิบาย
การดำเนินการนี้จะเปลี่ยนขนาดแบบอักษรของลิงก์เป็น 20px ในขณะที่คุณคลิกลิงก์
ตัวอย่าง
<html>
<head>
<style>
body:active {
background: seagreen;
}
</style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html> คำอธิบาย
เมื่อคุณคลิกที่ใดก็ได้บนหน้าจอ สีพื้นหลังจะเปลี่ยนเป็นสีเขียวน้ำทะเล
ตัวอย่าง
<html>
<head>
<style>
#thisButton:active { color: red}
</style>
</head>
<body>
<button id="thisButton">Click Me!!</button>
</body>
</html> คำอธิบาย
สีแบบอักษรของข้อความปุ่มจะเปลี่ยนเป็นสีแดงในขณะที่คุณคลิกที่ปุ่ม
ความเข้ากันได้ของเบราว์เซอร์
| Chrome | Firefox | ขอบ | IE | ซาฟารี | โอเปร่า |
| 1 | 1 | ใช่ | 4 | 1 | 5 |
