CSS - :first
The :first
@page
CSS pseudo-class describes the styling of the first page when printing a document.
Example
HTML
HTML
Copy Code
<p>First Page.</p> <p>Second Page.</p> <button>Print!</button>
CSS
CSS
Copy Code
@page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; }
JavaScript
JavaScript
Copy Code
document.querySelector("button").onclick = function(){ 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 on the default position.
Note: you may only use the absolute length units when defining the margin. Please see the page about length for more information.
Syntax
CSS
Copy Code
:first <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a> <var>style properties</var> <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a>
Description
The :first
@page
CSS pseudo-class describes the styling of the first page when printing a document.
Note: you cannot change all CSS properties. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | ? | No support | 8.0 | 9.2 | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | No support | ? | ? | ? |
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Paged Media Module Level 3 The definition of ':first' in that specification. |
Working Draft | No change |
CSS Level 2 (Revision 1) The definition of ':first' in that specification. |
Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:first