:first

Baseline 2023

Newly available

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Using `:first` for page print styles

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:

<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

@page :first {
  size: 8.5in 11in;
  margin-left: 3in;
  margin-top: 5in;
}

p {
  page-break-after: always;
  font: 1.2em sans-serif;
}

document.querySelector("button").addEventListener("click", () => {
  window.print();
});

Specifications

Specification
CSS Paged Media Module Level 3 # left-right-first

Browser compatibility

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

Syntax

Examples

Using :first for page print styles

Specifications

Browser compatibility

See also

Using `:first` for page print styles