CSS Reference Pseudo-class

:first

:first is a CSS pseudo-class selector used to select the first page of a printed document.

It is used in conjunction with the @page rule which selects all pages in a printed document. So, when used with @page, :first acts kind of like a filter used to select only the first page among all pages.

@page :first {
    /* styles for the first page */
}
                

Styles specified in a :first @page rule override any styles provided in an @page rule that has no pseudo-class specified.

In addition to :first, a @page can be used in conjunction with two other pseudo-classes, namely :left and :right, which select the left and right pages in double-sided documents, respectively.

Styles specified in a :first @page rule override any styles specified in :left and :right @page rules.

It is important to note that you cannot change all CSS properties inside an @rule. See the @page entry for more information on what styles can be changed and/or applied.

Trivia & Notes

All pages are automatically classified by user agents into either the :left or :right pseudo-class. Whether the first page of a document is :left or :right depends on the major writing direction of the root element. For example, the first page of a document with a left-to-right major writing direction would be a :right page, and the first page of a document with a right-to-left major writing direction would be a :left page. To explicitly force a document to begin printing on a left or right page, authors can insert a page break before the first generated box.

If a forced break occurs before the first generated box, it is undefined in CSS 2.1 whether :first applies to the blank page before the break or to the page after it.

Official Syntax

The :first pseudo-class selector is used in conjunction with the @page rule like so:

@page :first {
    /* styles for the first page go here... */
}
                

Examples

/* All margins set to 2cm */
@page { 
    margin: 2cm; 
} 

/* Top margin on first page 10cm */
@page :first {
  margin-top: 10cm;    
}
                

Browser Support

The :first pseudo-class selector is supported in Internet Explorer 8+ and in Opera 9.2+. It is not supported in Firefox. Support in other browsers is to be determined.

Written by

Last updated February 3, 2015 at 12:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.