Pseudo Class trong CSS được sử dụng để thêm các hiệu ứng đặc biệt tới một số Selector. Bạn không cần sử dụng JavaScript hoặc bất cứ ngôn ngữ Script nào để sử dụng các hiệu ứng này. Cú pháp đơn giản cho Pseudo Class trong CSS là:
selector:pseudo-class {property: value}Các Class trong CSS có thể được sử dụng với Pseudo Class với cú pháp sau:
selector.class:pseudo-class {property: value}Bảng dưới liệt kê một số cách sử dụng của Pseudo Class:
| Giá trị | Miêu tả |
|---|---|
| :link | Sử dụng class này để thêm style đặc biệt cho một unvisited link. |
| :visited | Sử dụng class này để thêm style đặc biệt cho một visited link. |
| :hover | Sử dụng class này để thêm style đặc biệt cho một phần tử khi người dùng di chuyển chuột qua nó |
| :active | Sử dụng class này để thêm style đặc biệt cho một phần tử khi active |
| :focus | Sử dụng class này để thêm style đặc biệt cho một phần tử khi nó được focus |
| :first-child | Sử dụng class này để thêm style đặc biệt cho một phần tử mà là phần tử con đầu tiên của phần tử khác |
| :lang | Sử dụng class này để xác định một ngôn ngữ để sử dụng trong một phần tử cụ thể |
Trong khi định nghĩa các Pseudo Class trong một khối <style>...</style>, bạn cần ghi nhớ:
- a:hover PHẢI theo sau a:link và a:visited trong phần định nghĩa CSS, nếu không nó sẽ không có hiệu quả.
- a:active PHẢI theo sau a:hover trong CSS, nếu không nó sẽ không có hiệu quả.
- Các tên được sử dụng cho Pseudo Class là không phân biệt kiểu chữ.
- Pseudo Class là khác với các Class khác trong CSS, tuy nhiên chúng có thể kết hợp với nhau.
:link Pseudo Class trong CSS
Ví dụ sau minh họa cách sử dụng :link class để thiết lập màu cho Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.
<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Vi du :link Pseudo Class</a>
</body>
</html>:visited Pseudo Class trong CSS
Ví dụ sau minh họa cách sử dụng :visited class để thiết lập màu cho Visited Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Ban click vao day</a>
</body>
</html> :hover Pseudo Class trong CSS
Ví dụ sau minh họa cách sử dụng :hover class để thay đổi màu của Link khi chúng ta di chuyển con trỏ qua link đó. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Di chuyen chuot qua day</a>
</body>
</html>:active Pseudo Class trong CSS
Ví dụ sau minh họa cách sử dụng :active class để thiết lập màu cho Active Link. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Ban click vao day</a>
</body>
</html>Kết quả là:
:focus Pseudo Class trong CSS
Ví dụ sau minh họa cách sử dụng :focus class để thay đổi màu cho Link được focus. Giá trị là bất kỳ tên màu hoặc bất kỳ định dạng Hex Code, … hợp lệ nào.
<html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Ban click vao day</a>
</body>
</html>Kết quả là một link như dưới đây. Khi link này được focus, màu của nó thay đổi sang màu cam. Màu link sẽ thay đổi trở lại khi không còn được focus nữa.
:first-child Pseudo Class trong CSS
:first-child Pseudo Class xác định một phần tử cụ thể mà là phần tử con đầu tiên của phần tử khác và thêm Style đặc biệt tới phần tử đó.
Để làm cho :first-child có thể làm việc trong IE, phần tử <!DOCTYPE> phải được khai báo ở phần đầu tài liệu.
Ví dụ, để tạo độ thụt dòng cho đoạn văn đầu tiên của tất cả phần tử <div>, bạn có thể sử dụng định nghĩa CSS sau:
<html>
<head>
<style type="text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>Doan van thu 1. Doan van nay se bi thut dau dong (thuoc tinh text-indent).</p>
<p>Doan van thu 2. Doan van nay se khong bi thut dau dong.</p>
</div>
<p>Phan tu p phai la phan tu con DAU TIEN trong the div thi moi bi tac dong boi thuoc tinh
text-indent, cac doan van khac se khong bi anh huong:</p>
<div>
<b>Vi du khac</b>
<p>Doan van dau tien trong the div. Doan van nay khong bi anh huong. Vi no khong phai la phan tu con DAU TIEN.</p>
</div>
</body>
</html>Kết quả là:
Doan van thu 1. Doan van nay se bi thut dau dong (thuoc tinh text-indent).
Doan van thu 2. Doan van nay se khong bi thut dau dong.
Phan tu p phai la phan tu con DAU TIEN trong the div thi moi bi tac dong boi thuoc tinh text-indent, cac doan van khac se khong bi anh huong:
Doan van dau tien trong the div. Doan van nay khong bi anh huong. Vi no khong phai la phan tu con DAU TIEN.
:lang Pseudo Class trong CSS
Sử dụng :lang Pseudo Class trong CSS, bạn có thể xác định một ngôn ngữ nào đó cho một phần tử cụ thể.
Class này là thực sự hữu ích với những tài liệu được trình bày bởi nhiều ngôn ngữ và có các qui ước khác nhau. Ví dụ, tiếng Pháp sử dụng cặp dấu ngoặc nhọn (< và >) cho mục đích trích dẫn, trong khi tiếng Anh sử dụng các dấu trích dẫn (' và ').
<html>
<head>
<style type="text/css">
/* Hai cach trich dan khac nhau cho tung loai ngon ngu */
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr">Vi du mot doan van duoc trich dan</q>...</p>
</body>
</html>Khi bạn cần chỉ rõ sự khác nhau này trong một tài liệu, thì bạn có thể sử dụng :lang Pseudo Class để thay đổi các dấu trích dẫn một cách hợp lý. Phần ví dụ dưới đây thay đổi thẻ <blockquote> một cách thích hợp cho từng ngôn ngữ được sử dụng:
Kết quả là:
