:first
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2023.
:first là lớp giả trong CSS, được sử dụng với at-rule @page, đại diện cho trang đầu tiên của tài liệu được in. (Xem :first-child để biết về phần tử đầu tiên nói chung của một nút.)
/* Chọn trang đầu tiên khi in */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
Note:
Bạn không thể thay đổi tất cả các thuộc tính CSS với lớp giả này. Bạn chỉ có thể thay đổi lề, orphans, widows, và ngắt trang của tài liệu. Hơn nữa, bạn chỉ có thể sử dụng các đơn vị độ dài tuyệt đối khi định nghĩa lề. Tất cả các thuộc tính khác sẽ bị bỏ qua.
Cú pháp
:first {
/* ... */
}
Ví dụ
Sử dụng :first cho kiểu dáng in trang
Nhấn nút "Print!" để in ví dụ. Các từ trên trang đầu tiên sẽ xuất hiện ở đâu đó gần trung tâm, trong khi các trang khác sẽ có nội dung ở vị trí mặc định:
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
@page :first {
size: 8.5in 11in;
margin-left: 3in;
margin-top: 5in;
}
p {
page-break-after: always;
font: 1.2em sans-serif;
}
document.querySelector("button").addEventListener("click", () => {
window.print();
});
Đặc tả
| Specification |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |