: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.)

css
/* 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

css
: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:

html
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
css
@page :first {
  size: 8.5in 11in;
  margin-left: 3in;
  margin-top: 5in;
}

p {
  page-break-after: always;
  font: 1.2em sans-serif;
}
js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
First page pseudo-class (:first)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch