W3cubDocs

/CSS

:first

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
:first 18 12 No 8 9.2 6 4.4 18 No 10.1 6 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first