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
HTML
<p>First Page.</p> <p>Second Page.</p> <button>Print!</button>
CSS
@page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; }
JavaScript
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 | Status | Comment |
---|---|---|
CSS Paged Media Module Level 3 The definition of ':first' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of ':first' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
First page pseudo-class (:first ) | Chrome Full support 18 | Edge Full support 12 | Firefox No support No | IE Full support 8 | Opera Full support 9.2 | Safari Full support 6 | WebView Android Full support 4.4 | Chrome Android Full support 18 | Firefox Android No support No | Opera Android Full support 10.1 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support