10.1 Pseudo-classes
Pseudo-classes và pseudo-elements trong HTML và CSS cho phép tạo kiểu cho các phần tử dựa trên trạng thái hoặc nội dung của chúng, mà không cần thêm class bổ sung hay thay đổi cấu trúc của tài liệu HTML. Chúng cung cấp công cụ tuyệt vời để tạo ra các trang web tương tác và hấp dẫn.
Pseudo-classes được áp dụng cho các phần tử dựa trên trạng thái hoặc vị trí của chúng trong cấu trúc tài liệu. Chúng giúp tạo kiểu cho các phần tử trong các tình huống khác nhau, như khi con trỏ được di chuyển qua, khi chúng được focus hoặc được chọn. Pseudo-classes bắt đầu với dấu hai chấm (:).
Các pseudo-class đơn giản nhất:
Pseudo-class :hover được áp dụng cho một phần tử khi người dùng di chuyển con trỏ qua nó.
<button type="button">Nút</button>
button:hover {
color: red;
}
Pseudo-class :focus được áp dụng cho một phần tử khi nó được focus, ví dụ khi nhấp vào trường nhập liệu.
<input type="text">
input:focus {
outline-color: blue;
}
Pseudo-class :active được áp dụng cho một phần tử khi nó đang hoạt động, ví dụ khi nhấn vào một liên kết hoặc nút.
<button type="button">Nút</button>
button:active {
background-color: green;
}
Pseudo-class :visited được áp dụng cho các liên kết mà người dùng đã truy cập.
<a href="#">Liên kết</a>
a:visited {
color: purple;
}
10.2 Pseudo-elements
Pseudo-elements cho phép tạo kiểu cho các phần của phần tử không phải là các phần tử HTML riêng biệt. Chúng bắt đầu với hai dấu hai chấm (::). Pseudo-elements được sử dụng để tạo và tạo kiểu cho nội dung trước hoặc sau phần tử, chọn và tạo kiểu cho dòng đầu tiên hoặc chữ cái đầu tiên của phần tử và nhiều tác vụ khác.
Các pseudo-element đơn giản nhất:
Pseudo-element ::before chèn nội dung trước nội dung của phần tử.
<p>Tôi tên là Stepan.</p>
p::before {
content: "Xin chào! ";
color: blue;
}
Pseudo-element ::after chèn nội dung sau nội dung của phần tử.
<p>Chú ý!</p>
p::after {
content: " Cảm ơn đã chú ý!";
color: red;
}
Pseudo-element ::first-line được áp dụng cho dòng đầu tiên của phần tử. Nó cho phép tạo kiểu chỉ cho dòng đầu tiên của văn bản.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
Pseudo-element ::selection được áp dụng cho văn bản được người dùng chọn.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Hãy thử chọn văn bản trong kết quả.
10.3 Ví dụ sử dụng pseudo-elements
Pseudo-classes và pseudo-elements trong HTML và CSS cung cấp khả năng tuyệt vời để tạo kiểu cho các phần tử dựa trên trạng thái hoặc nội dung của chúng. Chúng cho phép tạo ra các trang web tương tác và hấp dẫn hơn mà không cần thay đổi cấu trúc HTML.
Ví dụ 1: Chèn biểu tượng trước văn bản của liên kết
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Đây là liên kết với biểu tượng</a>
</body>
</html>
Ví dụ 2: Thêm khối được tạo kiểu sau đoạn văn
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Đây là một đoạn văn bản.</p>
</body>
</html>
Kết hợp
Pseudo-classes và pseudo-elements có thể được kết hợp để tạo ra các kiểu phức tạp và mạnh mẽ.
Ví dụ: Tạo kiểu cho văn bản được chọn bên trong liên kết khi di chuyển chuột qua
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Chọn văn bản này, sau đó di chuyển chuột qua nó.</a>
</body>
</html>
GO TO FULL VERSION