CSS :right Pseudo-Class

CSS :right Pseudo-Class

The CSS :right pseudo-class selects right-hand pages in paged media, such as printed documents and books. It is used inside the @page at-rule to apply page-specific formatting, including different margins for left-hand and right-hand pages.

:right Syntax

@page :right {
  margin: 20mm;
}

The :right pseudo-class is written in a page selector within the @page at-rule. It targets right-hand pages rather than HTML elements.

Basic Example

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

}

Applies a larger left margin to right-hand pages, providing extra space along the inside edge of a bound document.

Named Page Example

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

Targets right-hand pages assigned to the named page type chapter.

No Parentheses

The :right pseudo-class does not accept arguments and is written without parentheses.

Not an Element Selector

/* Incorrect use */
div:right {
  margin: 20px;
}

The :right pseudo-class is a page pseudo-class. It does not select ordinary HTML elements such as divs, paragraphs, or headings.

How :right Works

When a document is divided into pages for printing or another paged-media presentation, the browser or paged-media renderer determines which pages are right-hand pages.

Page Selection

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

The rule applies to right-hand pages. It does not affect left-hand pages unless another applicable page rule provides the same values.

Page Context

The selector matches page boxes generated during pagination, not elements in the document's DOM.

Physical Page Position

In a typical left-to-right book, right-hand pages are the recto pages and usually correspond to odd-numbered pages. Page progression rules determine the actual assignment.

Page-Specific Declarations

Only properties and descriptors supported in the @page context can be used. Ordinary element-layout properties do not automatically apply to page boxes.

Print Rendering

The result is visible in print preview, printed output, or a compatible paged-media renderer. It does not create alternating margins in the normal scrolling webpage.

The @page At-Rule

The @page at-rule defines page dimensions, margins, and other supported properties for paged media. The :right pseudo-class narrows a rule to right-hand pages.

All Pages

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

Sets the page size and margins for all pages in the document.

Right-Hand Pages

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

Overrides the horizontal margins for right-hand pages.

Combined Rules

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

The general rule supplies the page size and default margins. The right-hand rule supplies different horizontal margins for matching pages.

Page Size

Use the size descriptor to define the page dimensions or orientation where supported. Page selectors such as :right are primarily useful for changing page-specific formatting, especially margins.

Right vs. Left Pages

The :right and :left pseudo-classes allow different page formatting on opposite sides of a two-page spread.

CSS Example

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

Creates mirrored margins for a left-to-right bound document. The inside margins are larger to provide room for binding.

Comparison

Page Progression

The relationship between left/right pages and odd/even page numbers depends on the document's page progression direction. Do not assume that :right always means an odd-numbered page.

Single-Sided Printing

Page selectors can still be evaluated during single-sided printing, but mirrored margins are most useful when the printed pages will be arranged as facing pages.

Page Margins

One of the most common uses of :right is setting different inside and outside margins for printed documents.

Right-Hand Page Margins

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

Sets a larger inside margin on the left edge of a right-hand page in a left-to-right book.

Mirrored Margins

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

Creates a consistent binding margin on both sides of a facing-page spread.

Margin Shorthand

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

Sets top, right, bottom, and left margins in that order.

Print Units

Physical units such as mm, cm, and in are useful for page layouts because they express intended printed dimensions.

Printer Limitations

Printers may have non-printable areas. Browser print settings and printer capabilities can affect the final margins.

Duplex Printing

Duplex printing places content on both sides of each sheet of paper. The :right and :left pseudo-classes help prepare mirrored page layouts for bound documents.

CSS Example

@page :right {
  margin-left: 32mm;
  margin-right: 16mm;
}
@page :left {
  margin-left: 16mm;
  margin-right: 32mm;
}

Provides extra space along the inside edges of facing pages in a left-to-right book.

Binding Space

Additional inside margin helps prevent text from being obscured near the spine of a bound document.

Duplex Printer Settings

CSS does not force a printer to print on both sides of the paper. Duplex mode must be selected in the print settings or configured by the printing system.

Left-to-Right vs. Right-to-Left

The location of the inside edge depends on the page progression direction. Adjust the mirrored margins to match the document's binding arrangement.

First Page and Page Progression

The :first page pseudo-class selects the first page of a document. The :right pseudo-class selects pages based on their right-hand position.

First Page

@page :first {
  margin-top: 35mm;
}

Applies a larger top margin to the first page.

Right-Hand Pages

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

Applies a larger left margin to right-hand pages.

Combined Page Selectors

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

Targets the first page when it is also a right-hand page.

Page Progression Direction

The document's writing direction influences page progression and which side the first page occupies. The same physical page side does not always correspond to the same page-number parity.

First Page Placement

For many left-to-right printed documents, the first page is a right-hand page. Right-to-left documents can use different page progression.

Named Pages

Named pages allow different sections of a document to use different page formatting. A named page selector can be combined with :right.

Assign a Named Page

.chapter {
  page: chapter;
}

Assigns the named page type chapter to the matching content.

Style Right-Hand Chapter Pages

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

Applies the specified margins to right-hand pages of the named page type.

Style Left-Hand Chapter Pages

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

Applies mirrored margins to left-hand pages of the same named page type.

Complete Example

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

Uses a named page to establish chapter formatting and mirrored horizontal margins.

Page Breaks

Page-break controls can influence pagination and determine where content begins in a printed document.

Start on a Right-Hand Page

.chapter-title {
  break-before: right;
}

Requests a page break so that the chapter title begins on a right-hand page in supporting paged-media renderers.

Start on a Left-Hand Page

.appendix-title {
  break-before: left;
}

Requests that the appendix title begin on a left-hand page.

Blank Pages

Forcing a right-hand or left-hand page may require an additional blank page to preserve the requested page position.

Page Selection vs. Page Breaking

The :right pseudo-class styles right-hand page boxes. The break-before property controls where a page break is requested. They perform different tasks.

Browser Support

Support for forced left-hand and right-hand page breaks varies among browsers and paged-media tools. Test the output in the intended printing environment.

Page Margin Boxes

CSS paged media provides page margin boxes that can display content such as page numbers or running headers in supporting browsers and renderers.

Right-Hand Page Number

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

Places the current page number in the bottom-right page margin box on right-hand pages.

Left-Hand Page Number

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

Places the current page number in the bottom-left margin box on left-hand pages.

Mirrored Page Numbers

@page :right {
  @bottom-right {
    content: counter(page);
  }
}
@page :left {
  @bottom-left {
    content: counter(page);
  }
}

Positions page numbers near the outside edges of facing pages in a left-to-right document.

Compatibility

Page margin box support depends on the browser or paged-media renderer. Verify the results in print preview and in the final printed or PDF output.

Screen vs. Print

The :right pseudo-class applies to paged media. It does not style elements based on their horizontal position in a normal webpage.

Print Page Styling

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

The rule affects right-hand page boxes during paginated rendering.

Screen Element Styling

.sidebar-right {
  margin-left: auto;
  width: 250px;
}

This ordinary CSS rule affects an HTML element's layout. It is unrelated to the :right page pseudo-class.

Print Stylesheet

@media print {
  .screen-only {
    display: none;
  }
}
@page :right {
  margin-left: 30mm;
  margin-right: 15mm;
}

Uses @media print for element-level print styling and @page :right for right-hand page formatting.

Print Preview

Use the browser's print preview to inspect the page layout. The result may differ from the scrolling screen layout.

Related Page Pseudo-Classes

The :right pseudo-class belongs to the group of page pseudo-classes used in CSS paged media.

Comparison

Right vs. Left

Use :right and :left to create mirrored margins and other facing-page formatting.

Right vs. First

The :first pseudo-class identifies the first page, while :right identifies a page side. A first page can also match :right.

Right vs. Blank

A blank page generated during pagination can also be a right-hand page. The :blank pseudo-class can be used to apply special formatting to such pages.

:right Specificity

Page selectors use a specificity system that differs from ordinary element selectors. The :right pseudo-class contributes to page selector specificity rather than the usual element-selector specificity tuple.

Page Selector Specificity

Specificity Example

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

For right-hand pages, the more specific page selector sets the left margin to 30mm, assuming no higher-priority rule overrides it.

Different from Element Selectors

Do not apply the ordinary ID-class-type specificity model directly to page selectors. CSS Paged Media defines separate page selector specificity rules.

Practical Uses

The :right pseudo-class is useful when preparing paginated documents with facing-page layouts.

Book Margins

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

Provides extra binding space on right-hand pages of a left-to-right book.

Mirrored Margins

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

Creates matching inside and outside margins for facing pages.

Page Numbers

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

Places page numbers on the outside edge of right-hand pages in supporting renderers.

Chapter Layouts

@page chapter:right {
  margin-left: 32mm;
}

Applies a custom margin to right-hand pages in a named chapter page type.

Printed Manuals

Use mirrored margins when preparing printed manuals, reports, books, and other documents intended for binding.

Limitations

The :right pseudo-class is designed for paged media and depends on the capabilities of the browser or paged-media renderer.

Not for Normal Screen Layout

The pseudo-class does not select elements positioned on the right side of a webpage.

Requires @page

The selector is used in the @page context, not as a normal element selector.

Browser Differences

Support for page selectors, page margin boxes, and related paged-media features can vary across browsers and rendering tools.

Print Settings

Browser print settings, page scaling, paper size, and printer capabilities may influence the final output.

Does Not Enable Duplex Printing

CSS can prepare mirrored page layouts but cannot force a printer to use duplex mode.

Page Number Parity

Right-hand pages are not universally equivalent to odd-numbered pages. Page progression direction determines the relationship.

Limited Page Properties

Not all CSS properties are supported inside @page. Use page-specific declarations supported by the target renderer.

Forced Page Breaks

Support for break-before: right and similar page-side controls varies. Test the output when exact page placement is important.

Best Practices

• Use :right inside @page to style right-hand pages in paged media.
• Pair :right with :left when creating mirrored margins.
• Use physical units such as mm or in for predictable print dimensions.
• Allow enough inside margin for binding when preparing books or manuals.
• Consider the document's page progression direction when assigning inside and outside margins.
• Use :first for first-page formatting and :right for right-hand page formatting.
• Use named pages when different sections need distinct page layouts.
• Test page margin boxes and forced page breaks in the intended renderer.
• Check browser print preview before printing or exporting a PDF.
• Remember that printer settings control duplex printing, paper size, and other physical output options.

:right Example

This example uses the :right and :left pseudo-classes to create mirrored margins for a printed document. The browser result includes a visual explanation and a Print Preview button. Open the example in the editor and use print preview to inspect the page layout.

HTML

<div class="paged-demo">
  <h1>CSS Paged Media Example</h1>
  <p>This document demonstrates mirrored page margins.</p>
  <p>Right-hand pages have a larger left margin.</p>
  <p>Left-hand pages have a larger right margin.</p>
  <button type="button" onclick="window.print()">Print Preview</button>
</div>

CSS

@page {
  size: A4;
  margin: 20mm;
}
@page :right {
  margin-left: 30mm;
  margin-right: 15mm;
}
@page :left {
  margin-left: 15mm;
  margin-right: 30mm;
}
@media print {
  .paged-demo button {
    display: none;
  }
}

Browser Result

Play in Editor

Note: The mirrored margins are intended for paged output. They do not appear as alternating margins in the normal scrolling view. Print preview results depend on browser support and print settings.

Browser Support

Baseline: Widely available. The :right page pseudo-class has long-standing support in major browser engines for paged-media styling. Support for related features, such as page margin boxes and forced right-hand page breaks, may differ.

For current compatibility information, visit Can I Use? and search for CSS paged media or @page.

Specifications

The :right pseudo-class is defined in CSS Paged Media Module Level 3. It is used in page selectors to match right-hand page boxes.

CSS Paged Media Level 3 - Spread Pseudo-Classes