:first CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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;
}

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.

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
Edge Chrome Firefox Opera Safari
12181169.26
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1811610.1614.4

Last updated by CSSPortal on: 1st October 2023