Các từ khóa lớp giả được sử dụng để chỉ định trạng thái đặc biệt của bộ chọn mà nó được thêm vào. Điều này cho phép chúng tôi kiểm soát nhiều hơn và bây giờ chúng tôi có thể nhắm mục tiêu một bộ chọn khi nó ở trạng thái cụ thể, ví dụ:di chuột, đã kiểm tra, đã truy cập, v.v.
Sau đây là đoạn mã trình bày các lớp giả trong CSS -
Ví dụ
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a { font-size: 18px; font-weight: bold; } a:link { color: rgb(17, 0, 255); } a:visited { color: rgb(128, 0, 107); } a:hover { color: rgb(255, 105, 243); } a:active { color: rgb(255, 153, 0); } </style> </head> <body> <h1>Pseudo class example</h1> <a href="#">This is some sample link text</a> <h2>Hover , click on the above link to see the pseudo class in action</h2> </body> </html>
Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi di chuột qua liên kết -
Khi nhấp vào liên kết -
Quay lại cùng một trang một lần nữa, trạng thái liên kết sẽ thay đổi thành đã truy cập.