::first-letterlà một phần tử giả cho phép bạn tạo kiểu chữ cái đầu tiên trong một phần tử mà không cần gắn thẻ xung quanh chữ cái đầu tiên đó trong HTML của bạn. Mặc dù không có thẻ nào được thêm vào DOM, nhưng nó giống như thể chữ cái đầu tiên được nhắm mục tiêu được bao gồm trong một thẻ. Bạn có thể tạo kiểu cho chữ cái đầu tiên đó như cách bạn tạo một phần tử thực với:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Kết quả là như thể bạn có một phần tử giả xung quanh chữ cái đầu tiên:
The first letter is bold and red.
Chữ cái đầu tiên được in đậm và màu đỏ
- Phần tử giả chỉ hoạt động nếu phần tử mẹ là một hộp chứa khối (nói cách khác, nó không hoạt động trên chữ cái đầu tiên của
display: inline;các phần tử.) - Nếu bạn có cả a
::first-lettervà::first-linetrên một phần tử, chữ cái đầu tiên sẽ kế thừa từ các kiểu dòng đầu tiên, nhưng các kiểu trên::first-lettersẽ ghi đè khi các kiểu xung đột. - Nếu bạn tạo nội dung bằng
::before, ký tự đầu tiên hoặc ký tự dấu câu, cho dù đó là một phần của nút văn bản gốc hay được tạo bằng nội dung được tạo, sẽ là mục tiêu.
Thêm thông tin
- Khi sử dụng cho drop-caps, hãy sử dụng kết hợp với
p:first-of-typeđể không phải mọi chữ cái đầu tiên đều được tạo kiểu - Bút mẫu - với Nội dung được tạo
- Wiki W3C
- Mô-đun Bộ chọn CSS3 W3C
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Lưu ý: Đối với Internet Explorer 8 trở xuống, hãy sử dụng dấu hai chấm đơn :first-letterthay vì ký hiệu dấu hai chấm.