You are on the editable version of MDN Web Docs

View as an MDN Web Docs user:

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.





<p>First Page.</p>
<p>Second Page.</p>


@page :first {
  margin-left: 50%;
  margin-top: 50%;

p {
  page-break-after: always;


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


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.


Specification Status Comment
CSS Paged Media Module Level 3
The definition of ':first' in that specification.
Working Draft No change.
CSS Level 2 (Revision 1)
The definition of ':first' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
First page pseudo-class (:first)Chrome Full support 18Edge Full support 12Firefox No support NoIE Full support 8Opera Full support 9.2Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 1.0


Full support  
Full support
No support  
No support

See also

Document Tags and Contributors

Last updated by: wbamberg,