Page selectors | Frontend Practical Guide

Overview

The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:first`	18	12	116	6	18	6
Other
`css.selectors.left` Left-hand page pseudo-class (`:left`)	6	12		5	18	4.2
`css.selectors.right` Right-hand page pseudo-class (`:right`)	6	12		5	18	4.2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS @page:first demo.

CSS @page:left demo.

CSS @page:right demo.

Using Page selectors
The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination.