:first | CSS-Tricks

Die CSS-Pseudo-Klasse :first wird mit der @page-Regel verwendet, um die erste Seite eines gedruckten Dokuments auszuwählen. Sie funktioniert sehr ähnlich wie der Selektor :first-child, der das erste Kind-Element in einem übergeordneten Container anspricht, wählt aber stattdessen die erste gedruckte Seite in einer Reihe von Seiten aus, wenn das Dokument an einen Drucker gesendet wird.

@page :first {
  margin: 50%;
}

Sie wissen also, wie Sie jede Webseite drucken können? Diese Webseite passt möglicherweise nicht genau auf ein Blatt Papier, wenn sie physisch ausgedruckt wird. Und wenn mehr als eine Seite gedruckt wird, können wir die Pseudo-Klasse :print verwenden, um die erste Seite des Stapels auszuwählen und zu stylen.

Showing three printed pages with the :first property CSS above it and pointed at the first page.

Die Pseudo-Klasse :first ist in der Spezifikation des CSS Paged Media Module Level 3 definiert, die sich derzeit im Entwurfsstatus befindet. Das bedeutet, dass :first noch in aktiver Entwicklung ist und sich ändern könnte, bis es vollständig als Candidate Recommendation implementiert ist.

Syntax

@page :first { }

Laut MDN kann :first nur die Eigenschaften margin, page-break, orphans und widows der ersten gedruckten Seite festlegen. Nach Tests scheint jedoch margin zum Zeitpunkt der Erstellung dieses Dokuments die einzige Eigenschaft zu sein, die eine sichtbare Auswirkung hat.

Demo

In der folgenden Demo haben wir drei <section>-Elemente erstellt. Wir erzwingen einen Seitenumbruch nach jedem Element, sodass wir insgesamt drei Seiten erhalten, wenn wir dies an den Drucker senden.

Dies ist das relevante CSS

@page :first {
  margin: 50%;
}

section {
  page-break-after: always;
  break-after: always;
}

Mithilfe von :first wählen wir die erste der drei Seiten aus und weisen ihr einen sehr großen Rand zu. Die letzten beiden Seiten erhalten keinen zusätzlichen Rand.