Page selectors
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 18 | 12 | 116 | 6 | 18 | 6 | |
| Other | ||||||
| Left-hand page pseudo-class (`:left`) | 6 | 12 | | 5 | 18 | 4.2 |
| Right-hand page pseudo-class (`:right`) | 6 | 12 | | 5 | 18 | 4.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
@page :first {
margin-top: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}Live demo
Use cases
-
Using Page selectors
The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.