:first CSS pseudo-class
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.
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.)
/* 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
:first {
/* ... */
}
Examples
Using :first for page print styles
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:
<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();
});
Specifications
| Specification |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
First page pseudo-class (
:first)
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support