:first
The :first
CSS pseudo-class, used with the @page
at-rule, represents the first page of a printed document. (See :first-child
for general first element of a node.)
css
/* Selects the first page when printing */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
Note: You can't change all CSS properties with this pseudo-class. You can only change the margins, orphans
, widows
, and page breaks of the document. Furthermore, you may only use absolute-length units when defining the margins. All other properties will be ignored.
Syntax
css
:first {
/* ... */
}
Examples
HTML
html
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
CSS
css
@page :first {
margin-left: 50%;
margin-top: 50%;
}
p {
page-break-after: always;
}
JavaScript
js
document.querySelector("button").addEventListener("click", () => {
window.print();
});
Result
Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.
Specifications
Specification |
---|
CSS Paged Media Module Level 3 # left-right-first |
Browser compatibility
BCD tables only load in the browser