:first
Die :first
CSS Pseudoklasse, verwendet mit der @page
At-Regel, repräsentiert die erste Seite eines gedruckten Dokuments. (Siehe :first-child
für das allgemeine erste Element eines Knotens.)
/* Selects the first page when printing */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
Hinweis:
Sie können nicht alle CSS-Eigenschaften mit dieser Pseudoklasse ändern. Sie können nur die Ränder, orphans
, widows
und Seitenumbrüche des Dokuments ändern. Außerdem dürfen Sie nur absolute-Längen-Einheiten verwenden, wenn Sie die Ränder definieren. Alle anderen Eigenschaften werden ignoriert.
Syntax
:first {
/* ... */
}
Beispiele
Verwendung von :first
für Druckstile von Seiten
Drücken Sie die Schaltfläche "Drucken!", um das Beispiel zu drucken. Die Wörter auf der ersten Seite sollten ungefähr in der Mitte sein, während andere Seiten ihren Inhalt an der Standardposition haben:
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
@page :first {
size: 8.5in 11in;
margin-left: 3in;
margin-top: 5in;
}
p {
page-break-after: always;
font: 1.2em sans-serif;
}
document.querySelector("button").addEventListener("click", () => {
window.print();
});
Spezifikationen
Specification |
---|
CSS Paged Media Module Level 3 # left-right-first |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
First page pseudo-class ( :first ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support