# 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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.typeset.sh/setup/css-and-paged-media/page-selectors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.