:first

Die :first CSS Pseudo-Klasse, 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.)

css
/* Selects the first page when printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

Hinweis: Sie können mit dieser Pseudo-Klasse nicht alle CSS-Eigenschaften ändern. Sie können nur die Ränder, orphans, widows und Seitenumbrüche des Dokuments ändern. Außerdem dürfen Sie beim Festlegen der Ränder nur absolute-Längeneinheiten verwenden. Alle anderen Eigenschaften werden ignoriert.

Syntax

css
:first {
  /* ... */
}

Beispiele

HTML

html
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

CSS

css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

Ergebnis

Drücken Sie die "Drucken!"-Taste, um das Beispiel zu drucken. Die Wörter auf der ersten Seite sollten sich irgendwo in der Nähe der Mitte befinden, während andere Seiten ihre Inhalte an der Standardposition haben.

Spezifikationen

Specification
CSS Paged Media Module Level 3
# left-right-first

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch