: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;
}
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 18 | 116 | 9.2 | 6 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 116 | 10.1 | 6 | 1 | 4.4 |
Last updated by CSSPortal on: 1st October 2023