:first
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2023.
Die :first CSS Pseudoklasse, die mit der @page At-Regel verwendet wird, 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. Darüber hinaus 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
Drücken Sie die Schaltfläche "Drucken!", um das Beispiel zu drucken. Die Wörter auf der ersten Seite sollten sich irgendwo in der Mitte befinden, während andere Seiten ihre Inhalte 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 # first-pseudo |