Nội dung chính
Giới thiệu Pseudo Class trong CSS
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ị | Mô 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>
<meta charset="UTF-8">
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Ví dụ :link Pseudo Class</a>
</body>
</html>
Kết quả:
: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>
<meta charset="UTF-8">
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Click vào link này</a>
</body>
</html>
Kết quả:
: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>
<meta charset="UTF-8">
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Di chuyển chuột qua link này</a>
</body>
</html>
Kết quả:
: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>
<meta charset="UTF-8">
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Click vào link này</a>
</body>
</html>
Kết quả:
: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>
<meta charset="UTF-8">
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Click vào link này</a>
</body>
</html>
Kết quả 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ử
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>Text 1. Đoạn văn này bị thụt đầu dòng (text-indent).</p>
<p>Text 2. Đoạn văn này không bị thụt đầu dòng.</p>
</div>
<p>Phần tử p đầu tiên của thẻ div thì mới được áp dụng lệnh
text-indent, các doạn văn khác không bị ảnh hưởng</p>
<div>
<h3>Ví dụ first-child Pseudo Class trong CSS</h3>
<p>Đây là đoạn văn thứ 2 của thẻ p trong thẻ div.</p>
<p>Đây là đoạn văn thứ 3 của thẻ p trong thẻ div. </p>
</div>
</body>
</html>
Kết quả:
: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>
<meta charset="UTF-8">
<style type="text/css">
/* 2 cách trính dẫn khác nhau cho từng loại ngôn ngữ*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr">Đây là văn bản được trích dẫn</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ả:
