CSS Reference Pseudo-class

:left

: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.

Written by

Last updated June 3, 2020 at 12:33 pm by Mary Lou

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