:left
is a CSS pseudo-class selector used to select all the left pages of a printed document.
When printing double-sided documents (such as books), the pages on left and right pages may be different. The :left
page selector is used in conjunction with the @page
rule, which selects all pages in a printed document, to select all the left pages of the document. In other words, when used with @page
, :left
acts kind of like a filter used to select only the left pages.
@page :left { /* styles for the left pages */ }
In addition to :left
, a @page
can be used in conjunction with two other pseudo-classes, namely :first
and :right
, which select the first page and all the right pages in double-sided documents, respectively.
Styles specified in a :left
@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 :left
pseudo-class selector is used in conjunction with the @page rule like so:
@page :left { /* styles for the left pages go here... */ }
Examples
/* All margins set to 2cm */ @page { margin: 2cm; } /* Left margin on left pages 2.5cm */ @page :left { margin-left: 2.5; }
Browser Support
The :left
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.