Dấu hai chấm mô tả một điều kiện
Lớp giả (pseudo-class) chọn phần tử theo trạng thái hoặc điều kiện có sẵn trong CSS. a:hover chọn a đang được đưa con trỏ lên; không cần gán class="hover" trong HTML. Nó khác a.hover, vốn yêu cầu lớp do người viết tự đặt có tên hover.
| Lớp giả | Cách hiểu trong bài |
|---|---|
| :link |Liên kết chưa được xem là đã truy cập|
| :visited |Liên kết được trình duyệt xem là đã truy cập theo lịch sử được phép dùng|
| :hover |Con trỏ đang ở trên phần tử|
| :active |Phần tử đang được kích hoạt; với chuột thường là trong lúc giữ nút chính|
| :focus |Phần tử đang nhận tiêu điểm, chẳng hạn được chọn bằng phím Tab|
:hover phụ thuộc tương tác con trỏ. Khi chỉ dùng bàn phím, tiêu điểm giúp nhận ra liên kết hoặc nút đang được chọn.
Theo dõi màu và thao tác
```html
<p><a href="dich.html">Mở trang mẫu</a></p>
<button type="button">Đưa chuột lên nút</button>
```
```css
body { font-size: 16px; }
button { font-size: 16px; }
a:link { color: red; }
a:visited { color: green; }
a:hover { color: magenta; }
a:active { color: maroon; }
a:focus { outline: 2px solid blue; }
button:hover { font-size: 150%; }
```
Liên kết chưa truy cập có chữ đỏ. Sau khi mở trang đích rồi quay lại, trình duyệt có thể trình bày nó theo :visited với màu green. Trạng thái này còn phụ thuộc lịch sử và chế độ trình duyệt; một liên kết không được coi là đã truy cập chỉ vì đã đưa chuột lên.
:hover đặt chữ magenta; :active đặt chữ maroon trong lúc kích hoạt. Các quy tắc liên kết cùng mức được xếp link → visited → hover → active, nên màu lúc giữ chuột không bị quy tắc hover trước đó thay lại. :focus đặt viền bao xanh dương giúp nhìn thấy tiêu điểm.
Nút có cỡ ban đầu 16px, cha cũng 16px. Khi hover, font-size:150% tính theo cỡ cha nên thành 24px. Không suy mọi giá trị 150% đều tính theo cỡ cũ của chính phần tử.
Bài luyện
Bộ chọn nào ứng với a đang được đưa con trỏ chuột lên?
Dấu chấm yêu cầu lớp tên hover.
Đúng. :hover là lớp giả.
hover dùng một dấu hai chấm trong cú pháp này.
Đây là quan hệ con cháu với tên phần tử hover.
Lời giải
a:hover kết hợp phần tử a và trạng thái hover. Không cần thêm class="hover"; a.hover lại chọn theo tên lớp tự đặt.
Bài luyện
Với quy tắc :active trong mẫu, lúc nào liên kết nhận màu maroon khi dùng chuột?
active không tự lưu trạng thái bật/tắt.
Đã truy cập liên quan :visited.
Đúng. Đây là trạng thái kích hoạt đang diễn ra.
Ẩn phần tử không định nghĩa active.
Lời giải
:active mô tả lúc phần tử đang được kích hoạt, thường từ khi nhấn nút chuột chính đến khi thả. Nó không có nghĩa giữ nguyên kiểu sau mọi lần nháy chuột.
Bài luyện
Dùng Tab để chuyển đến liên kết. Lớp giả nào mô tả liên kết đang nhận tiêu điểm?
Đúng. :focus mô tả phần tử nhận tiêu điểm.
visited liên quan lịch sử truy cập.
link không mô tả vị trí tiêu điểm bàn phím.
hover liên quan con trỏ, không thay cho tiêu điểm.
Lời giải
Tab chuyển tiêu điểm qua các phần tử có thể nhận tiêu điểm. :focus chọn phần tử hiện đang nhận tiêu điểm; trong mẫu nó có đường bao xanh dương.
Bài luyện
Nút và cha đều có cỡ 16px; khi hover nút đặt font-size:150%. Cỡ nút lúc đó là bao nhiêu?
150% là hệ số 1,5, không phải 150px.
Cần áp dụng hệ số 1,5.
20px không bằng1,5×16.
Đúng. 1,5×16=24.
Lời giải
Phần trăm trong font-size tính theo cỡ cha. Cha16px nên 150% ×16px =1,5×16px =24px. Dữ kiện cho cả hai cùng 16px giúp so cỡ trước và khi hover rõ ràng.
Đang học