:first

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

 

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

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

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

Синтаксис

:first

Примеры

HTML

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

CSS

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

p {
  page-break-after: always;
}

JavaScript

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

Результат

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

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

Спецификация Статус Комментарий
CSS Paged Media Module Level 3
Определение ':first' в этой спецификации.
Рабочий черновик Без изменений.
CSS Level 2 (Revision 1)
Определение ':first' в этой спецификации.
Рекомендация Первое определение.

Поддержка браузерами

 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
First page pseudo-class (:first)Chrome Полная поддержка 18Edge Полная поддержка 12Firefox Нет поддержки НетIE Полная поддержка 8Opera Полная поддержка 9.2Safari Полная поддержка 6WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 18Firefox Android Нет поддержки НетOpera Android Полная поддержка 10.1Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

 

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

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