:focus
เซเลกเตอร์ :focus ใช้สำหรับใช้สไตล์ที่ต้องการเมื่อองค์ประกอบฟอร์มได้รับโฟกัส (focus) เช่น ปุ่ม ลิงก์ กล่องป้อนข้อมูล องค์ประกอบสามารถได้รับโฟกัสผ่านเมาส์หรือแท็บ กีบอร์ด โฟกัสจะคงอยู่บนองค์ประกอบจนกว่าองค์ประกอบอื่นจะได้รับโฟกัส
:active
เซเลกเตอร์ :active ใช้สำหรับบ่งชี้ว่าแท็กแองคอร์ (anchor) ทำงานอยู่ หรือปุ่มทำงานอยู่ เมื่อเมาส์ถูกกดลง เซเลกเตอร์ active จะถูกใช้และคงอยู่จนกว่าจะปล่อยเมาส์
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงการใช้งาน :focus และ :active บนปุ่มและลิงก์:
<!DOCTYPE html> <html> <head> <title>Selector Example</title> <style> button { border: 2px solid black; } button:focus { border: 2px dotted red; } a { color: black; } a:active { color: red; } </style> </head> <body> <button type="submit">Focus Me</button> <a href="#">Active Me</a> </body> </html>
ผลลัพธ์
