:first

CSS псевдокласс :first используется с @-правилом @page, представляя первую страницу документа при печати.

css
/* Выбирает первую страницу при печати */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

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

Синтаксис

Error: could not find syntax for this item

Примеры

HTML

html
<p>Первая страница.</p>
<p>Вторая страница.</p>
<button>Напечатать</button>

CSS

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

p {
  page-break-after: always;
}

JavaScript

js
document.querySelector("button").onclick = function () {
  window.print();
};

Результат

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

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

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

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

BCD tables only load in the browser

Смотрите также