: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

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

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

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