Các phần tử giả CSS
Các yếu tố giả là gì?
Phần tử giả CSS được sử dụng để tạo kiểu cho các phần được chỉ định của phần tử.
Ví dụ: nó có thể được sử dụng để:
- Tạo kiểu cho chữ cái hoặc dòng đầu tiên của một phần tử
- Chèn nội dung vào trước hoặc sau nội dung của một phần tử
Cú pháp
Cú pháp của các phần tử giả:
selector::pseudo-element {
property: value;
}Phần tử giả ::dòng đầu tiên
Phần tử giả ::first-line được sử dụng để thêm kiểu đặc biệt cho dòng đầu tiên của văn bản.
Ví dụ sau đây định dạng dòng đầu tiên của văn bản trong tất cả phần tử <p>:
Lưu ý: Phần tử giả ::first-line chỉ có thể được áp dụng cho các phần tử cấp khối.
Các thuộc tính sau áp dụng cho phần tử giả ::first-line :
- thuộc tính phông chữ
- đặc tính màu sắc
- thuộc tính nền
- khoảng cách từ
- khoảng cách chữ
- trang trí văn bản
- căn chỉnh theo chiều dọc
- chuyển đổi văn bản
- chiều cao giữa các dòng
- thông thoáng
Lưu ý ký hiệu dấu hai chấm kép - ::first-line so với :first-line
Dấu hai chấm thay thế ký hiệu dấu hai chấm đơn cho các phần tử giả trong CSS3. Đây là nỗ lực của W3C nhằm phân biệt giữa các lớp giả và các phần tử giả .
Cú pháp dấu hai chấm đơn được sử dụng cho cả các lớp giả và phần tử giả trong CSS2 và CSS1.
Để tương thích ngược, cú pháp dấu hai chấm đơn có thể được chấp nhận đối với các phần tử giả CSS2 và CSS1.
Phần tử giả ::chữ cái đầu tiên
Phần tử giả ::first-letter được sử dụng để thêm một kiểu đặc biệt cho chữ cái đầu tiên của văn bản.
Ví dụ sau định dạng chữ cái đầu tiên của văn bản trong tất cả phần tử <p>:
Lưu ý: Phần tử giả ::first-letter chỉ có thể được áp dụng cho các phần tử cấp khối.
Các thuộc tính sau đây áp dụng cho phần tử giả ::first-letter:
- thuộc tính phông chữ
- đặc tính màu sắc
- thuộc tính nền
- thuộc tính lề
- thuộc tính đệm
- thuộc tính biên giới
- trang trí văn bản
- căn chỉnh theo chiều dọc (chỉ khi "float" là "không")
- chuyển đổi văn bản
- chiều cao giữa các dòng
- trôi nổi
- thông thoáng
Các phần tử giả và các lớp HTML
Các phần tử giả có thể được kết hợp với các lớp HTML:
Ví dụ trên sẽ hiển thị chữ cái đầu tiên của đoạn văn có class="intro", màu đỏ và có kích thước lớn hơn.
Nhiều phần tử giả
Một số phần tử giả cũng có thể được kết hợp.
Trong ví dụ sau, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, cỡ chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có chữ hoa nhỏ. Phần còn lại của đoạn văn sẽ có cỡ chữ và màu sắc mặc định:
Ví dụ
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Hãy tự mình thử »CSS - ::trước phần tử giả
Phần tử giả ::before có thể được sử dụng để chèn một số nội dung trước nội dung của một phần tử.
Ví dụ sau chèn một hình ảnh vào trước nội dung của mỗi phần tử <h1>:
CSS - Phần tử giả ::after
Phần tử giả ::after có thể được sử dụng để chèn một số nội dung sau nội dung của một phần tử.
Ví dụ sau chèn một hình ảnh sau nội dung của mỗi phần tử <h1>:
CSS - Phần tử giả ::marker
Phần tử giả ::marker chọn các điểm đánh dấu của các mục danh sách.
Ví dụ sau đây tạo kiểu cho các điểm đánh dấu của các mục danh sách:
CSS - Phần tử giả ::selection
Phần tử giả ::selection khớp với phần của phần tử được người dùng chọn.
Các thuộc tính CSS sau đây có thể được áp dụng cho ::selection : color , background , cursor và outline .
Ví dụ sau làm cho văn bản được chọn có màu đỏ trên nền vàng:
Tất cả các phần tử giả CSS
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert something after the content of each <p> element |
| ::before | p::before | Insert something before the content of each <p> element |
| ::first-letter | p::first-letter | Selects the first letter of each <p> element |
| ::first-line | p::first-line | Selects the first line of each <p> element |
| ::marker | ::marker | Selects the markers of list items |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
Tất cả các lớp giả CSS
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang( language ) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Selects all visited links |
