:right is a CSS pseudo-class selector used to select all the right pages of a printed document.
When printing double-sided documents (such as books), the pages on left and right pages may be different. The :right page selector is used in conjunction with the @page rule, which selects all pages in a printed document, to select all the right pages of the document. In other words, when used with @page, :right acts kind of like a filter used to select only the right pages.
@page :right {
/* styles for the right pages */
}
In addition to :right, a @page can be used in conjunction with two other pseudo-classes, namely :first and :left, which select the first page and all the left pages in double-sided documents, respectively.
Styles specified in a :right @page rule override any styles provided in an @page rule that has no pseudo-class specified.
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.
If different declarations have been given for left and right pages, the user agent must honor these declarations even if the user agent does not transfer the pages to left and right sheets (e.g., a printer that only prints single-sided).
Official Syntax
The :right pseudo-class selector is used in conjunction with the @page rule like so:
@page :right {
/* styles for the right pages go here... */
}
Examples
/* All margins set to 2cm */
@page {
margin: 2cm;
}
/* Left margin on right pages 2.5cm */
@page :right {
margin-right: 2.5;
}
Browser Support
The :right 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.
