Page selectors

In CSS, the @page rule allows you to specify styles for individual pages or groups of pages in a document. You can use various page selectors to select specific pages or groups of pages to apply your styles to.

Some common page selectors include:

• :first: Selects the first page of a document.

• :left and :right: Select pages that appear on the left or right side of a spread in a printed document.

• :blank: Selects pages that do not hold any content (due to left, right insertion break)

• :nth(x of y): Selects every xth page of a document, where x is a positive integer.

• Additionally named pages are also possible.

First page

Selector for the first page pf a document. Useful for cover-pages etc.

@page {
    size: A4;
    margin: 1cm;
}
@page:first {
    background: red;
}

Left and right selector

In a book-like document, printed documents can have left and right pages. You can specify different layouts for each type using the :left and :right selector. A common example is to display the current page number on the outside or inside of the book.

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

Blank pages

If a force page break (e.g. break-before: left;) is present in the document flow, a blank page must be inserted if the current page is already a left page to ensure that the element begins on a new left page. The blank page selector can be used to add a custom design for these pages.

@page:blank {
    background: lightgrey;
}

Blank page selector (Live Demo)

Nth selector

Select a page by its number or every N pages.

• @page:nth(1) Select the first page of a document

• @page:nth(2) Select the second page of a document

• @page:nth(2n) Select all even document pages

Named pages

The document flow can also influence the page layout. For instance, it is possible to specify that all tables should be printed on pages with a landscape orientation. This can be achieved by using named pages.

@page wide-table {
    size: A4 landscape;
}

/* Print any table with the class 'wide' on a landscape orientated page */
table.wide {
    page: wide-table;
}