Cú pháp
Cú pháp của pseudo-classes:
selector:pseudo-class { property: value; }
Anchor Pseudo-classes
Các link có thể được hiển thị theo nhiều cách khác nhau:
/* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }Lưu ý: a: hover PHẢI đến sau a:link và a:visited trong định nghĩa CSS để có hiệu quả! a: active PHẢI đến sau a:hover vào định nghĩa CSS để có hiệu quả! Tên Pseudo-class không phân biệt chữ hoa chữ thường.
Pseudo-classes và HTML Classes
Các Pseudo-classes có thể được kết hợp với các classes HTML:
Khi bạn di chuột qua link trong ví dụ, nó sẽ thay đổi màu sắc:
a.highlight:hover { color: #ff0000; }
Hover trên <div>
Ví dụ về việc sử dụng :hover pseudo-class trên element <div>:
div:hover { background-color: blue; }
Tooltip Hover đơn giản
Di chuột qua element <div> để hiển thị element <p> (như tooltip):
p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }
:first-child Pseudo-class
:first-child pseudo-class khớp với một element được chỉ định là element con đầu tiên của một element khác.
Trong ví dụ sau, selector khớp với bất kỳ element <p> nào là element con đầu tiên của bất kỳ element nào:
p:first-child { color: blue; }
:lang Pseudo-class
:lang pseudo-class cho phép bạn xác định các quy tắc đặc biệt cho các ngôn ngữ khác nhau.
Trong ví dụ dưới đây, :lang xác định dấu ngoặc kép cho element <q> với lang = "no":
<html> <head> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Văn bản <q lang="no">Đoạn văn bên trong dấu ngoặt kép</q> Văn bản.</p> </body> </html>