7.1 Giả lớp trạng thái
Giả lớp trong CSS là những từ khóa đặc biệt được thêm vào selectors để chỉ định trạng thái của một phần tử hoặc vị trí của nó trong cấu trúc tài liệu. Chúng cho phép áp dụng styles cho các phần tử trong trạng thái hay hoàn cảnh nhất định mà không thể chỉ định bằng selectors thông thường.
Các giả lớp chính:
- Giả lớp trạng thái
- Giả lớp trạng thái cấu trúc
- Giả lớp form
- Giả lớp điều hướng
Cú pháp:
selector:pseudo-class {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Giả lớp trạng thái
Các giả lớp này được dùng để tạo style cho phần tử dựa trên trạng thái hiện tại của chúng, ví dụ như khi con trỏ chuột được đặt lên hoặc phần tử đang được kích hoạt:
:hover— được áp dụng khi người dùng đưa chuột lên phần tử:active— được áp dụng khi phần tử được kích hoạt (thường khi nhấn chuột):focus— được áp dụng khi phần tử đang có focus (ví dụ, khi sử dụng bàn phím):visited— được áp dụng cho các liên kết đã truy cập:link— được áp dụng cho các liên kết chưa truy cập
7.2 Giả lớp hover
Giả lớp :hover được áp dụng cho phần tử khi người dùng đưa con trỏ chuột lên nó.
Thường được sử dụng để thay đổi giao diện của liên kết và nút khi trỏ chuột đến.
Cú pháp:
selector:hover {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
Selector này thay đổi màu sắc văn bản và gạch chân liên kết khi trỏ chuột đến.
<a href="#">Liên kết ví dụ</a>
a:hover {
color: red;
text-decoration: underline;
}
Ứng dụng:
- Cải thiện tương tác với người dùng (UI) thông qua phản hồi trực quan
- Được sử dụng cho nút, liên kết và các phần tử tương tác khác
7.3 Giả lớp focus
Giả lớp :focus được áp dụng cho phần tử khi nó nhận được focus. Ví dụ, khi nhấn vào nó hoặc khi chuyển đến nó
bằng phím tab. Thường được sử dụng cho input và các phần tử form khác.
Cú pháp:
selector:focus {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
Selector này thay đổi màu viền của input và loại bỏ outline khi nhận được focus.
<input type="text" name="text" id="text">
input:focus {
border-color: blue;
outline: none;
}
Ứng dụng:
- Cải thiện tính accessibility của trang web
- Làm cho các phần tử tương tác nổi bật hơn khi có focus
7.4 Giả lớp nth-child
Giả lớp :nth-child được áp dụng cho phần tử dựa trên vị trí của chúng trong số các phần tử con của cha.
Nó chấp nhận tham số có thể là số, từ khóa hoặc biểu thức.
Cú pháp:
selector:nth-child(n) {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
Selector này cho phép áp dụng style cho các phần tử dựa trên vị trí của chúng trong số anh chị em.
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
/* Áp dụng style cho tất cả các phần tử con lẻ */
li:nth-child(odd) {
background-color: lightgray;
}
/* Áp dụng style cho tất cả các phần tử con chẵn */
li:nth-child(even) {
background-color: lightblue;
}
/* Áp dụng style cho phần tử con thứ hai */
li:nth-child(2) {
color: red;
}
Ứng dụng:
- Style hàng của bảng, các phần tử danh sách và các cấu trúc lặp lại khác
- Cho phép tạo layout và style phức tạp mà không cần thêm các lớp bổ sung
7.5 Ví dụ sử dụng giả lớp
<button type="button">Button</button>
button:hover, button:focus {
background-color: darkblue;
color: white;
}
Style hàng chẵn của bảng:
<table>
<tr>
<th>Tên</th>
<th>Số lượng</th>
<th>Giá</th>
</tr>
<tr>
<td>Sản phẩm 1</td>
<td>5</td>
<td>10 đồng</td>
</tr>
<tr>
<td>Sản phẩm 2</td>
<td>3</td>
<td>15 đồng</td>
</tr>
<tr>
<td>Sản phẩm 3</td>
<td>8</td>
<td>7 đồng</td>
</tr>
</table>
tr:nth-child(even) {
background-color: #f2f2f2;
}
Loại trừ các phần tử xác định khỏi style chung:
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION