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.
Syntax
:first
Example
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").onclick = function () { 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | ? | Yes | No | 8 | 9.2 | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes | No | ? | ? | ? |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
chrisdavidmills,
erikadoyle,
Sebastianz,
fcard,
kscarfone,
Sheppy,
teoli,
brianloveswords,
FredB,
McGurk
Last updated by:
fscholz,