:first
Quick Summary for :first
The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document. (See :first-child for general first element of a node.)
Code Usage for :first
/* Selects the first page when printing */ @page :first {   margin-left: 50%;   margin-top: 50%; } 
More Details for :first

:first

The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document. (See :first-child for general first element of a node.)

/* Selects the first page when printing */ @page :first {   margin-left: 50%;   margin-top: 50%; } 

Note: You can't change all CSS properties with this pseudo-class. You can only change the margins, orphans, widows, and page breaks of the document. Furthermore, you may only use absolute-length units when defining the margins. All other properties will be ignored.

Syntax

:first

Examples

HTML

<p>First Page.</p> <p>Second Page.</p> <button>Print!</button> 

CSS

@page :first {   margin-left: 50%;   margin-top: 50%; }  p {   page-break-after: always; } 

JavaScript

document.querySelector("button").addEventListener('click', () => {   window.print(); }); 

Result

Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.

Specifications

Specification
Proposals for the future of CSS Paged Media # left-right-first

See also

@page Other page-related pseudo-classes: :left, :right Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

james clear
Random CSS Property

<easing-function>

The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes.
cubic-bezier() css reference