:first CSS Pseudo Class


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;

This will set the margins of the first page to 10mm, allow at most 2 orphans and 2 widows on the first page, and prevent the first page from breaking.


:first {
  /* ... */


<p>First Page.</p>
<p>Second Page.</p>
document.querySelector("button").addEventListener("click", () => {
@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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023