:first
Baseline
2023
Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die :first CSS Pseudoklasse, verwendet mit der @page 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. Darüber hinaus dürfen Sie nur absolute Längenmaßeinheiten verwenden, um die Ränder festzulegen. Alle anderen Eigenschaften werden ignoriert.
Syntax
:first {
/* ... */
}
Beispiele
Verwenden von :first für Druckseitenstile
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 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 # first-pseudo |
Browser-Kompatibilität
Loading…