The :first
CSS pseudo-class, used with the @page
at-rule, represents the first page of a printed document.
/* 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.
:first
<p>First Page.</p> <p>Second Page.</p> <button>Print!</button>
@page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; }
document.querySelector("button").onclick = function () { window.print(); }
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.
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | ? | Yes | No | 8 | 9.2 | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | No | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first