CSS :left Pseudo-Class

CSS :left Pseudo-Class

The CSS :left pseudo-class selects left-hand pages in paged media, such as printed documents. It is used with the @page at-rule to apply page-specific margins and other supported page properties.

:left Syntax

@page :left {
  margin: 20mm 15mm 20mm 25mm;
}

The :left pseudo-class is placed after @page. It selects left-hand page boxes rather than HTML elements.

Basic Example

@page :left {
  margin-left: 25mm;
}

This rule sets the left margin of left-hand printed pages to 25 millimeters.

Complete Margin Example

@page :left {
  margin: 20mm 15mm 20mm 25mm;
}

The margin values follow the standard CSS order: top, right, bottom, and left.

Page Context Only

The :left pseudo-class is a page selector. It is not used with ordinary element selectors such as div:left or p:left.

How :left Works

When a document is divided into printed pages, the browser or print formatter creates page boxes. The :left pseudo-class matches page boxes classified as left-hand pages.

Printed Page Sequence

In a typical left-to-right book layout, odd-numbered pages appear on the right and even-numbered pages appear on the left. The actual page side depends on the document's page progression.

CSS Example

@page :left {
  margin-left: 30mm;
  margin-right: 15mm;
}

This rule gives left-hand pages a larger left margin than right margin.

Page Boxes, Not Elements

The pseudo-class selects an entire page box. It does not select the first, last, or leftmost HTML element on a page.

Print Formatting

The rule is evaluated when a browser or other formatter lays out the document as paged media. It does not change the normal on-screen layout.

Page Progression

Whether the first page is a left-hand or right-hand page depends on the page progression direction and applicable page-layout rules.

Using :left with @page

The @page at-rule defines properties for printed page boxes. The :left pseudo-class limits a page rule to left-hand pages.

General Page Rule

@page {
  size: A4;
  margin: 20mm;
}

This rule defines the page size and default margins for the document.

Left-Hand Page Rule

@page :left {
  margin-left: 30mm;
  margin-right: 15mm;
}

This rule overrides the horizontal margins on left-hand pages.

Combined Example

@page {
  size: A4;
  margin: 20mm;
}
@page :left {
  margin-left: 30mm;
  margin-right: 15mm;
}

The general rule applies to all pages, while the more specific left-page rule provides different horizontal margins for left-hand pages.

Named Pages

Page selectors can also work with named pages. For example, @page chapter:left can target left-hand pages assigned to a page named chapter.

Left and Right Pages

The :left and :right pseudo-classes allow different styles for facing pages in a printed document.

Comparison

CSS Example

@page :left {
  margin-left: 15mm;
  margin-right: 30mm;
}
@page :right {
  margin-left: 30mm;
  margin-right: 15mm;
}

These rules create wider inside margins for a typical left-to-right, facing-page book layout. On left-hand pages, the inside edge is on the right. On right-hand pages, it is on the left.

Facing Pages

Alternating margins are useful for books, manuals, and documents intended for double-sided printing.

Not the Same as Text Alignment

The :left pseudo-class does not align text to the left. Use properties such as text-align for text alignment.

Page Margins

Page margins are one of the most common uses of the :left pseudo-class.

CSS Example

@page :left {
  margin: 20mm 30mm 20mm 15mm;
}
@page :right {
  margin: 20mm 15mm 20mm 30mm;
}

These values create larger inside margins for facing pages in a typical left-to-right book layout.

Margin Values

Inside and Outside Margins

The inside margin is the edge nearest the binding. The outside margin is the edge farthest from the binding.

Printing Considerations

Allow enough space for binding, trimming, and printer limitations when defining page margins.

:left vs. :first

The :left and :first page pseudo-classes select pages using different criteria.

Comparison

CSS Example

@page :first {
  margin-top: 40mm;
}
@page :left {
  margin-right: 30mm;
}

The first rule adjusts the first page's top margin. The second adjusts the right margin of left-hand pages.

Overlapping Conditions

The first page can also be a left-hand or right-hand page. When multiple page rules apply, the cascade determines the resulting property values.

First Page vs. First Child

The page pseudo-class :first is different from the structural pseudo-class :first-child, which selects HTML elements.

Supported Page Properties

The @page at-rule supports page-related declarations. Browser support varies by property.

Common Page Properties

Page Size

@page {
  size: A4;
}

The size property is typically defined in a general page rule. Page size cannot vary between left-hand and right-hand pages using the :left and :right pseudo-classes.

Page Margin Boxes

CSS Paged Media also defines margin at-rules for content such as page numbers and running headers. Support for these features varies among browsers and print formatters.

Print Preview and Testing

The effects of :left are visible in paged output rather than normal screen rendering.

Open Print Preview

Use the browser's Print command to inspect the document's page layout.

Create Multiple Pages

A document needs enough pages to demonstrate both left-hand and right-hand page styling.

Test Double-Sided Printing

For documents intended to be bound, verify the margin arrangement using the intended page progression and duplex printing settings.

Printer Settings

Printer margins, scaling, paper size, and browser print settings can affect the final output.

Browser Differences

Some browsers and print engines may not apply all page-specific rules consistently. Always test the actual output.

Practical Uses

The :left pseudo-class is useful for documents intended for printing or PDF generation.

Books and Manuals

Create different inside and outside margins for facing pages.

Double-Sided Printing

Adjust page margins to account for duplex printing and binding.

Reports

Apply consistent page layouts to multipage reports.

Printed Documentation

Control page margins in technical documentation and reference materials.

PDF Generation

Use page-specific styling when generating PDFs with a compatible browser or paged-media formatter.

Limitations

The :left pseudo-class is designed for paged media and has several important limitations.

Not an Element Selector

It cannot be used to select ordinary HTML elements.

No Screen Layout Effect

It does not change the normal layout of a webpage displayed on a screen.

Browser Support Varies

Support for page-specific declarations differs among browsers and print engines.

Not All CSS Properties Apply

Only properties permitted in the page context can be used reliably inside @page.

Page Side Is Not Always Page Number Parity

Left-hand pages are not necessarily even-numbered pages in every writing direction or page progression.

Printer Settings Can Override Results

Printer and browser settings may affect paper size, margins, and pagination.

Best Practices

• Use :left only within the @page at-rule.
• Use :right to define complementary styles for right-hand pages.
• Define general page settings in a separate @page rule.
• Use appropriate physical units such as mm or in for printed margins.
• Account for binding and page progression when setting inside margins.
• Do not assume left-hand pages are always even-numbered pages.
• Test multipage output using the intended browser or print formatter.
• Verify the final result in print preview or a generated PDF.

:left Example

This example defines different margins for left-hand and right-hand printed pages. It uses wider inside margins to demonstrate a typical facing-page book layout. Open the editor and use Print Preview to inspect the result.

HTML

<main>
  <section class="print-page">
    <h2>Page One</h2>
    <p>This is the first page of the document.</p>
  </section>
  <section class="print-page">
    <h2>Page Two</h2>
    <p>This is the second page of the document.</p>
  </section>
  <section class="print-page">
    <h2>Page Three</h2>
    <p>This is the third page of the document.</p>
  </section>
  <section class="print-page">
    <h2>Page Four</h2>
    <p>This is the fourth page of the document.</p>
  </section>
</main>

CSS

@page {
  size: A4;
  margin: 20mm;
}
@page :left {
  margin-left: 15mm;
  margin-right: 30mm;
}
@page :right {
  margin-left: 30mm;
  margin-right: 15mm;
}
@media print {
  .print-page {
    break-after: page;
  }
  .print-page:last-child {
    break-after: auto;
  }
}

Browser Result

The preview below shows the document content. The alternating page margins are applied only when the document is printed or viewed in Print Preview.

Play in Editor

Note: The on-screen preview does not display alternating page margins. Open the full editor example and use Print Preview to see how @page :left and @page :right affect the printed pages.

Browser Support

Baseline: Limited availability. The :left page pseudo-class is defined in CSS Paged Media. Support for applying different page margins to left-hand and right-hand pages varies among browsers and print engines.

For current compatibility information, visit Can I Use? and search for @page and page pseudo-classes.

Specifications

The :left pseudo-class is defined in CSS Paged Media Level 3. It is a page pseudo-class used in page selectors within the @page at-rule.

CSS Paged Media Level 3 - :left