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

```css
@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.

```css
@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.

```css
@page:blank {
    background: lightgrey;
}
```

{% embed url="<https://typeset.sh/en/live-demo/blank-page-selector>" %}

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

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

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