Chúng ta có thể tạo kiểu cho các phần cụ thể của một phần tử như first-letter, first-line hoặc chèn nội dung trước/sau nó. Cho các mục đích này, các phần tử giả (Pseudo Elements) trong CSS được sử dụng.
LƯU Ý - Để tách biệt các lớp giả (Pseudo Classes) và phần tử giả, trong CSS3, phần tử giả sử dụng ký hiệu hai chấm kép.
Cú pháp
Cú pháp sử dụng phần tử giả CSS trên một phần tử:
Selector::pseudo-element { css-property: /*giá trị*/; }
Tất cả các phần tử giả CSS có sẵn:
| STT | Phần tử giả & Mô tả |
|---|---|
| 1 | after Chèn nội dung sau nội dung của từng phần tử được đề cập. |
| 2 | before Chèn nội dung trước nội dung của từng phần tử được đề cập. |
| 3 | first-letter Chọn chữ cái đầu tiên của từng phần tử được đề cập. |
| 4 | first-line Chọn dòng đầu tiên của từng phần tử được đề cập. |
| 5 | placeholder Chọn văn bản placeholder trong các phần tử biểu mẫu. |
| 6 | selection Chọn phần của phần tử được người dùng chọn. |
Ví dụ về phần tử giả CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <style> p::first-letter { background-color: black; } p::first-line { background-color: lightgreen; color: white; } span { font-size: 2em; color: #DC3545; } </style> </head> <body> <h2>Mạng máy tính</h2> <p><span>A</span> hệ thống các máy tính và thiết bị ngoại vi điện tử như máy in được gọi là mạng máy tính. </p> </body> </html>
Kết quả
Ví dụ khác về phần tử giả CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after { content: " HUYỀN THOẠI!"; background: orange; padding: 5px; } div:nth-of-type(2) p:nth-child(2)::before { content: "Sách:"; background-color: lightblue; font-weight: bold; padding: 5px; } </style> </head> <body> <div> <p>Cầu thủ bóng đá</p> <p>Sachin Tendulkar:</p> </div> <hr> <div> <p><q>Theo đuổi giấc mơ của bạn</q></p> <p><q>Chơi theo cách của tôi</q></p> </div> </body> </html>
Kết quả
