:first CSS Pseudo Class

Description

The CSS :first pseudo-class selects the first page of a printed document. It is used with the @page at-rule.

The only CSS properties that can be changed with the :first pseudo-class are the margins, orphans, widows, and page breaks. All other properties will be ignored. Additionally, only absolute-length units can be used when defining the margins.

Here is an example of how to use the :first pseudo-class:

@page :first {

  margin: 10mm;

  orphans: 2;

  widows: 2;

  page-break-after: avoid;

}

Syntax

:first {
  /* ... */
}

Example

<p>First Page.</p>

<p>Second Page.</p>

<button>Print!</button>

<script>

document.querySelector("button").addEventListener("click", () => {

  window.print();

});

</script>

@page :first {

  margin-left: 50%;

  margin-top: 50%;

}



p {

  page-break-after: always;

}

Browser Support

The following table will show you the current browser support for the CSS :first pseudo class.

Desktop
12	18	116	9.2	6

Tablets / Mobile
18	116	10.1	6	1	4.4

Last updated by CSSPortal on: 1st October 2023