8.1 Các khái niệm cơ bản
Kết hợp pseudo-classes và pseudo-elements trong CSS cho phép tạo ra những selectors mạnh mẽ và linh hoạt để định dạng các thành phần dựa trên trạng thái, cấu trúc và nội dung của chúng. Điều này mở ra rất nhiều cơ hội để tạo ra những kiểu dáng phức tạp và động, giúp cải thiện giao diện người dùng và trải nghiệm khi tương tác với web page.
Cơ bản về kết hợp
Pseudo-classes
Pseudo-classes được ký hiệu bằng một dấu hai chấm (:) và được áp dụng lên các thành phần dựa trên trạng thái hoặc vị trí của chúng. Ví dụ:
:hover— áp dụng khi con trỏ chuột di chuyển vào thành phần:first-child— chọn thành phần con đầu tiên của cha
Pseudo-elements
Pseudo-elements được ký hiệu bằng hai dấu hai chấm (::) và được sử dụng để định dạng một phần của thành phần hoặc thêm nội dung. Ví dụ:
::before— thêm nội dung trước thành phần::first-letter— định dạng chữ cái đầu tiên của thành phần
Kết hợp
Pseudo-classes và pseudo-elements có thể được kết hợp để tạo ra các selectors phức tạp, cho phép áp dụng style vào các thành phần dựa trên trạng thái và cấu trúc của chúng.
Cú pháp:
selector:pseudo-class::pseudo-element {
thuộc tính: giá trị;
}
8.2 Kết hợp để tăng tính tương tác
Ví dụ 1: Định dạng chữ cái đầu tiên khi hover
Trong ví dụ này, chữ cái đầu tiên của đoạn văn sẽ phóng to và đổi màu đỏ khi con trỏ chuột di chuyển vào đoạn văn:
/* Định dạng chữ cái đầu tiên của đoạn văn khi hover */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Ví dụ 2: Thêm nội dung trước đường dẫn khi focus
Trong ví dụ này, biểu tượng sẽ được thêm trước đường dẫn và đổi màu xanh khi đường dẫn nhận focus:
/* Thêm biểu tượng trước đường dẫn khi focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Kết hợp để định dạng cấu trúc
Ví dụ 3: Định dạng đoạn văn đầu tiên trong div với nội dung bổ sung
Trong ví dụ này, dòng đầu tiên của đoạn văn đầu tiên bên trong div sẽ được in đậm và đổi màu xanh lá:
/* Định dạng dòng đầu tiên của đoạn văn đầu tiên bên trong div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Ví dụ 4: Thêm phần tử trang trí sau phần tử cuối của danh sách
Trong ví dụ này, một phần tử trang trí sẽ được thêm sau phần tử cuối của danh sách và đổi màu đỏ:
/* Thêm phần tử trang trí sau phần tử cuối của danh sách */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Kết hợp cho các điều kiện phức tạp
Ví dụ 5: Định dạng các phần tử chẵn trong danh sách khi hover
Trong ví dụ này, các phần tử chẵn trong danh sách sẽ có nền xám nhạt và chữ xanh khi con trỏ chuột di chuyển vào:
/* Định dạng các phần tử chẵn trong danh sách khi hover */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Ví dụ 6: Định dạng đường dẫn đang active và đã được ghé thăm
Trong ví dụ này, các đường dẫn đã được ghé thăm và đang ở trạng thái active sẽ đổi màu cam và được gạch chân:
/* Định dạng đường dẫn đang active và đã được ghé thăm */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Ví dụ hoàn chỉnh
/* Định dạng dòng đầu tiên của đoạn văn đầu tiên bên trong div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Thêm phần tử trang trí sau phần tử cuối của danh sách */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Định dạng các phần tử chẵn trong danh sách khi hover */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Thêm biểu tượng trước đường dẫn khi focus */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Định dạng chữ cái đầu tiên của đoạn văn khi hover */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ kết hợp pseudo-classes và pseudo-elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Đây là đoạn văn đầu tiên bên trong div.</p>
<p>Đây là đoạn văn thứ hai bên trong div.</p>
</div>
<ul>
<li>Thành phần danh sách 1</li>
<li>Thành phần danh sách 2</li>
<li>Thành phần danh sách 3</li>
<li>Thành phần danh sách 4</li>
</ul>
<a href="#">Đường dẫn với biểu tượng khi focus</a>
<p>Di chuyển chuột vào đoạn văn này để thấy hiệu ứng ở chữ cái đầu tiên.</p>
</body>
</html>
GO TO FULL VERSION