Web/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

Specification	Status	Comment
CSS Paged Media Module Level 3The 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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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