:first

Псевдокласс :first CSS псевдокласса, используемый с @page правилом, представляет первую страницу печатного документа. (См. :first-child для общего первого элемента узла.)

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

Примечание: Не все свойства CSS можно изменить с помощью этого псевдокласса. Можно изменить только отступы, orphans, widows и разрывы страниц документа. Кроме того, при определении отступов можно использовать только единицы абсолютной длины. Все остальные свойства будут проигнорированы.

Синтаксис

:first {
  /* ... */
}

Примеры

HTML

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

CSS

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

p {
  page-break-after: always;
}

JavaScript

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

Результат

Нажмите кнопку «Печать!», чтобы распечатать пример. Слова на первой странице должны быть примерно посередине, а содержимое других страниц будет отображаться в стандартном положении.

Спецификации

Спецификация
CSS Модуль печатных медиа, уровень 3 # left-right-first

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:first`	18	12	116	9.2	6	18	116	10.1	6	1.0	4.4

См. также

@page
Другие псевдоклассы, связанные со страницами: :left, :right

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first