:first CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2023 browserübergreifend verfügbar.
Die :first CSS Pseudoklasse, verwendet mit der @page Regel, repräsentiert die erste Seite eines gedruckten Dokuments. (Siehe :first-child für das generelle 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ängeneinheiten definieren, wenn Sie die Ränder festlegen. Alle anderen Eigenschaften werden ignoriert.
Syntax
:first {
/* ... */
}
Beispiele
Verwendung von :first für Druckseitenstile
Drücken Sie den "Print!"-Button, um das Beispiel zu drucken. Die Wörter auf der ersten Seite sollten sich irgendwo in der Mitte befinden, während andere Seiten ihren Inhalt an der Standardposition haben werden:
<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
| Spezifikation |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |