Lớp giả khác phần tử giả
Phần tử giả (pseudo-element) giúp định dạng một phần nội dung hoặc thành phần được CSS tạo ra. Trong cách viết đang học, dùng hai dấu hai chấm, như ::first-line, khác dấu hai chấm của lớp giả :hover.
| Bộ chọn | Phần được định dạng trong mẫu |
|---|---|
| p.doan::first-line |Dòng hiển thị đầu tiên của đoạn thuộc lớp doan|
| p#chu_dau::first-letter |Chữ đầu của đoạn có id chu_dau|
| ::selection |Phần văn bản đang được chọn|
Dòng hiển thị đầu tiên phụ thuộc nội dung, phông, cỡ chữ và chiều rộng vùng chứa. Nó không phải dòng đầu trong mã nguồn, cũng không chỉ phụ thuộc chiều rộng cửa sổ.
Ba phần được định dạng riêng
```html
<p class="doan">Buổi đọc chung bắt đầu bằng một câu hỏi ngắn. Mỗi người lần lượt trình bày ý kiến và ghi lại điều cần nhớ.</p>
<p id="chu_dau">Một câu mở đầu được đánh dấu.</p>
```
```css
p.doan::first-line {
color: red;
font-family: monospace;
font-size: 120%;
}
p#chu_dau::first-letter { font-size: 200%; }
::selection { background-color: lime; }
```
Dòng đầu của đoạn doan có chữ đỏ, phông monospace và cỡ 120%; những dòng sau không nhận kiểu ấy từ quy tắc ::first-line. Đoạn chu_dau có chữ đầu lớn hơn theo 200%, không phải toàn bộ đoạn.
Kéo chọn một phần văn bản để thấy nền lime từ ::selection; bỏ vùng chọn để đối chiếu. Các quy tắc này không cần chèn span quanh từng chữ. Trong ví dụ chữ đầu bắt đầu trực tiếp bằng văn bản, không có ảnh hay thành phần khác đứng trước.
Bài luyện
Bộ chọn nào định dạng dòng hiển thị đầu của p?
first-child xét vị trí phần tử trong cha.
Đây là lớp tự đặt tên first-line.
Đúng. ::first-line là phần tử giả.
hover là lớp giả, không phải dòng đầu.
Lời giải
p::first-line chọn dòng hiển thị đầu tiên của p. Dấu chấm chọn lớp tự đặt, còn :first-child xét vị trí phần tử, không chọn một dòng trong đoạn.
Bài luyện
Giữ cùng đoạn và phông, thu hẹp vùng chứa có thể làm gì với ::first-line?
Đúng. Vùng chứa hẹp có thể làm chữ xuống dòng sớm hơn.
Đoạn vẫn có thể có nhiều dòng.
CSS không xóa chữ của đoạn.
Không thể cam kết khi vùng chứa thay đổi.
Lời giải
Dòng đầu là dòng được trình duyệt bố trí khi hiển thị. Thu hẹp vùng chứa có thể đẩy một số từ xuống dòng tiếp, nên phần nhận định dạng ::first-line thay đổi dù văn bản vẫn giữ nguyên.
Bài luyện
Trong mẫu, thuộc tính nào đặt nền lime cho phần văn bản đang chọn?
font-family đặt phông của dòng đầu.
font-size đặt cỡ chữ đầu.
color đặt màu chữ dòng đầu.
Đúng. ::selection chỉ phần đang chọn.
Lời giải
Quy tắc ::selection {background-color:lime;} đặt màu nền cho phần văn bản đang được chọn. Khi bỏ vùng chọn, phần ấy không còn hiển thị kiểu nền vùng chọn.
Đang học