CSS :first Pseudo-Class

CSS :first Pseudo-Class

The CSS :first pseudo-class selects the first page of a printed document. It is used inside the @page rule to apply page-specific settings, such as different margins on the opening page. Unlike :first-child, it does not select HTML elements or affect their normal screen layout.

:first Syntax

@page :first {
  margin: 2cm;
}

The :first pseudo-class is written after @page. It targets the first page generated when the document is printed or displayed in print preview.

Example Syntax

@page {
  margin: 2cm;
}
@page :first {
  margin-top: 4cm;
}

All printed pages receive a margin of 2cm. The first page receives a larger top margin of 4cm.

The :first pseudo-class does not accept arguments. It is a page selector and does not use ordinary element-selector specificity rules.

How :first Works

When a browser prints a document, it divides the content into pages according to the available paper size, page margins, and pagination rules.

The @page rule defines properties of those printed pages. Adding :first allows the first page to use different page settings from subsequent pages.

Expected Matching Behavior

The first page is determined by the document's printed page sequence, not by the first HTML element.

Important: The :first pseudo-class can only be used as part of a page selector. Writing p:first does not select the first paragraph.

Page Properties

The @page rule accepts page-related properties. The :first pseudo-class allows supported properties to be applied specifically to the first printed page.

Common Page Properties

Browser support varies by property. Page margins are the most practical and widely supported use of @page :first.

Different Top Margin

@page {
  margin: 20mm;
}
@page :first {
  margin-top: 40mm;
}

The first printed page receives extra space above its content. Subsequent pages use the standard 20mm margin.

Different Bottom Margin

@page {
  margin: 20mm;
}
@page :first {
  margin-bottom: 35mm;
}

This creates additional space at the bottom of the opening page.

Page Size and Orientation

@page {
  size: A4 portrait;
  margin: 20mm;
}
@page :first {
  margin-top: 35mm;
}

This example uses A4 portrait pages and gives the first page a larger top margin. Changing page size or orientation for only the first page is not consistently supported across browsers.

:first vs. :first-child

The :first and :first-child pseudo-classes have different purposes.

Comparison

First Printed Page

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

This rule changes the top margin of the first printed page.

First Child Element

article p:first-child {
  font-weight: bold;
}

This rule selects a paragraph only when it is the first element child of an <article>.

First Element of Its Type

article p:first-of-type {
  font-weight: bold;
}

This rule selects the first paragraph among its siblings, even when another element appears before it.

Use :first for printed page formatting. Use :first-child or :first-of-type when selecting HTML elements.

Practical Uses

The :first pseudo-class is useful when the opening page of a printed document needs different spacing.

Creating Space for a Document Title

@page {
  margin: 20mm;
}
@page :first {
  margin-top: 50mm;
}

The additional top margin provides more space above the document title on the first printed page.

Formatting a Printed Report

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

The first page receives larger top and bottom margins, while the remaining pages use the standard margins.

Using Print-Specific Element Styles

@page :first {
  margin-top: 40mm;
}
@media print {
  .report-title {
    text-align: center;
    font-size: 24pt;
  }
  .print-only {
    display: block;
  }
}
@media screen {
  .print-only {
    display: none;
  }
}

The @page :first rule adjusts the first printed page margin, while the print media query styles HTML elements during printing.

Creating a Cover Page

@page {
  margin: 20mm;
}
@page :first {
  margin-top: 60mm;
}
@media print {
  .cover {
    break-after: page;
    text-align: center;
  }
}

The cover section begins on the first page and is followed by a page break. The first page uses a larger top margin.

The break-after: page declaration controls where the next page begins. The :first pseudo-class controls the first page's formatting.

Best Practices

• Use :first only with the CSS @page rule.
• Use @page without a pseudo-class to establish default printed page margins.
• Use @page :first to override page settings specifically for the opening page.
• Use physical units such as mm, cm, or in when defining print margins.
• Do not confuse :first with :first-child or :first-of-type.
• Use @media print to style HTML elements for printing.
• Use break-before and break-after when you need to control page breaks.
• Allow sufficient page margins for printers that cannot print to the edge of the paper.
• Test the document in print preview because page formatting support varies across browsers and print settings.
• Remember that browser print settings may override some CSS page settings.

:first Example

This example creates a two-page printable document. The first page receives a larger top margin than the second page. Open the example in the editor and use your browser's Print Preview to see the difference.

HTML

<main class="print-demo">
  <section class="print-page">
    <h1>Document Cover</h1>
    <p>This is the first printed page.</p>
  </section>
  <section class="print-page">
    <h2>Document Content</h2>
    <p>This is the second printed page.</p>
  </section>
</main>

CSS

@page {
  margin: 20mm;
}
@page :first {
  margin-top: 50mm;
}
.print-demo {
  font-family: Arial, sans-serif;
}
.print-demo .print-page {
  padding: 12px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
}
@media print {
  .print-demo .print-page {
    padding: 0;
    border: 0;
    margin: 0;
  }
  .print-demo .print-page:first-child {
    break-after: page;
  }
}

Browser Result

The browser preview shows both document sections. When printed, the cover begins on the first page with a 50mm top margin. The second page uses the default 20mm margins.

Note: The difference appears in Print Preview, not in the normal browser view or the embedded iframe.

Play in Editor

Browser Support

Baseline: Widely available. The :first page pseudo-class has long-standing support in major browsers, particularly for setting first-page margins with @page.

Support for individual properties inside @page varies. Margins are generally more reliable than advanced page formatting features.

Print preview results can also depend on the browser's paper size, scaling, and margin settings.

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

Specifications

The :first page pseudo-class is defined in CSS Paged Media Module Level 3, which specifies page selectors and page formatting for paginated documents.

CSS Paged Media Module Level 3 - Page Pseudo-Classes

CSS Paged Media Module Level 3 - The @page Rule