CSS :first Pseudo-Class: Styling the First Printed Page

Have you ever needed to format the first page of a printed document differently? The :first pseudo-class makes this possible. Understanding how to control first-page styling is essential when building web applications that need print-optimized layouts, such as reports, invoices, or documentation that users frequently print or export to PDF.

Unlike most pseudo-classes that target HTML elements, :first works specifically with the @page at-rule to target the first page in a printed document. This distinction is crucial because it means :first behaves differently from element-based pseudo-classes like :first-child.

Understanding :first in CSS

The :first CSS pseudo-class is a powerful tool for controlling how the first page of a printed document appears. Unlike most pseudo-classes that target HTML elements, :first works specifically with the @page at-rule to target the first page in a printed document MDN Web Docs. This distinction is crucial because it means :first behaves differently from element-based pseudo-classes like :first-child.

When you create web content that users might print--whether it's a report, invoice, contract, or documentation--having control over the first page's layout can significantly improve the printed result. For instance, you might want larger margins on the first page for binding, different header information, or specific formatting that distinguishes the cover page from subsequent content.

How :first Differs from :first-child

The :first pseudo-class targets the first page of a printed document, while :first-child targets the first child element within a parent container. This fundamental difference means they serve entirely different purposes and cannot be used interchangeably CSS-Tricks. A common mistake is attempting to use :first-child for page-level styling, which won't work because :first-child only matches elements in the DOM tree.

Think of it this way: if you're writing a book, :first-child would select the first paragraph of each chapter, while :first would select only the first page of the entire document. Understanding this distinction helps you apply the right tool for your specific use case.

For web applications that generate printable documents, understanding these distinctions helps you build better SEO-optimized experiences where print-friendly content also performs well in search rankings.

Syntax and Usage with @page

The :first pseudo-class must always be used in conjunction with the @page at-rule. This combination defines print-specific styles that apply when the document is rendered for printing or PDF export.

Basic Syntax

@page :first {
 /* CSS properties for the first page */
 margin: 2cm;
 size: A4;
}

Practical Example

Consider a scenario where you're creating a document that needs extra top margin on the first page for a company letterhead or report cover:

/* Default margins for all pages */
@page {
 margin: 1cm;
 size: A4;
}

/* Extra margin for the first page */
@page :first {
 margin: 3cm 1cm 1cm 1cm; /* Top, Right, Bottom, Left */
}

In this example, the first page receives 3cm of top margin while all other pages maintain the standard 1cm margin.

Supported Properties

One of the most critical aspects of working with :first is understanding its property limitations. According to the CSS Paged Media Module Level 3 specification, :first can only modify a subset of CSS properties.

Supported Properties

Margin Properties in Detail

When setting margins with :first, you can only use absolute-length units:

• cm (centimeters)
• mm (millimeters)
• in (inches)
• pt (points)
• pc (picas)

Relative units like em, rem, and percentages are not supported for margin values in @page contexts. This limitation exists because print output requires precise physical measurements.

Cross-Browser Best Practices

When deploying print styles with :first, consider these best practices:

1. Test across multiple browsers: Different browsers may render margins slightly differently
2. Use consistent units: Stick to one unit system (centimeters or inches) for predictability
3. Provide fallback styles: Define @page without :first as a baseline
4. Use print preview: Always verify output using browser print preview functionality
5. Test PDF output: Many users export to PDF rather than physical printing

Related Page Pseudo-Classes

Beyond :first, the CSS Paged Media specification includes other page pseudo-classes that work with @page:

:left and :right

The :left pseudo-class targets all left-facing pages in a double-sided document, while :right targets all right-facing pages. These pseudo-classes are essential for creating professional documents with different inner and outer margins:

@page :right {
 margin-left: 2cm;
 margin-right: 3cm;
}

@page :left {
 margin-left: 3cm;
 margin-right: 2cm;
}

Combining Page Pseudo-Classes

You can combine page pseudo-classes with :first to create nuanced layouts:

/* First page with different margins */
@page :first:right {
 margin: 2cm 3cm 1cm 2cm;
}

/* Subsequent right pages */
@page :right {
 margin: 1cm 3cm 1cm 2cm;
}

This approach is particularly valuable for documents that will be bound or stapled, where you might need extra space on the binding edge of the first page compared to subsequent pages.

Advanced: Margin Boxes and Generated Content

Modern browsers supporting the CSS Paged Media specification allow you to place content in 16 margin boxes around each page.

Available Margin Boxes

Corner boxes:

• @top-left-corner, @top-right-corner
• @bottom-left-corner, @bottom-right-corner

Edge boxes:

• @top-left, @top-center, @top-right
• @bottom-left, @bottom-center, @bottom-right

Side boxes:

• @left-top, @left-middle, @left-bottom
• @right-top, @right-middle, @right-bottom

Adding Page Numbers

A common use case is adding page numbers to your printed document:

@page :right {
 @bottom-right {
 content: counter(page);
 font-size: 10pt;
 }
}

@page :left {
 @bottom-left {
 content: counter(page);
 font-size: 10pt;
 }
}

The counter(page) value automatically tracks the current page number throughout the document.

Best Practices Summary

When incorporating :first into your print stylesheets:

• Keep print styles separate: Use a dedicated print stylesheet or @media print block
• Test incrementally: Build and test print styles gradually with print preview
• Use print preview extensively: The print preview function is your primary testing tool
• Consider PDF output: Test with PDF export since that's how many users consume printed content
• Set realistic expectations: Print rendering varies between browsers

The :first pseudo-class is a specialized tool that excels at its specific purpose--controlling the appearance of the first printed page. While its property set is intentionally limited, these constraints ensure consistent, predictable behavior across different browsers and output devices.

For web applications requiring print-optimized layouts, combining :first with other CSS paged media features creates professional documents suitable for business reports, legal contracts, and academic papers. Our web development services include implementing print-optimized CSS solutions that ensure your documents look professional when printed or exported to PDF.

Sources

1. MDN Web Docs - CSS :first Selector
2. CSS-Tricks - :first Pseudo-Class
3. Chrome Developers - Print Margins with CSS
4. CSS Paged Media Module Level 3 (W3C)