: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
Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline