CSS2 » Other »  :first  :left  :right

Version: Level 2

Compability: IE5+  N6+

@page page-selector pseudo-class { style-rules };

The @page at-rule is used to set a collection of style rules which define page context on a document level.

The page-selector component is a string that is used to provide a unique name for this set of style rules. This name provides a simple means of uniquely referencing these rules. For example, if you were creating a birthday card, you could use birthday-card as the page-selector.
The pseudo-class is one of three pseudo-classes that are exclusively used by the @page at-rule. They are:
The :first pseudo-class refers to the first page of a document. You may wish to apply different style rules to the first page, as compared to the rest of the pages in a document.
The :left pseudo-class refers to the left page of a document (i.e., think of an open book which will have a left and a right page).
The :right pseudo-class refers to the right page of a document (i.e., think of an open book which will have a left and a right page).
The style-rules is a set of one or more style rules that you wish to apply to the document. The entire set in enclosed by a pair of left and right curly braces { }. In addition to the regular CSS2 style rules, there are style rules which are exclusive to the @page at-rule. They include:
marks, orphans, page, page-break-after, page-break-before, page-break-inside, size, and windows.
A full explanation of these exclusive style rules would be extremely lengthy and is beyond the scope of this Quick Reference. As a starting point, the Guru recommends that you refer to Chapter 13 of the W3C standard on Paged Media.
The syntax for an at-rule is an @ symbol, followed immediately by an unique identifier, which in turn is followed by the block which contains content that is applied on a document level. The block syntax is either:

  • all content contained between a pair of curly brackets,
  • or is all content contained between the unique identifier and a semi-colon.
There are five at-rules: @charset, @font-face, @import. @media, and @page.


@page birthday-card:right { margin-bottom: 3in; margin-left: 2in; margin-right: 2in; margin-top; 1in; }
Language(s): CSS2

See Also: