:first CSS

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

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

Псевдокласс **`:first`** используемый совместно с правилом [`@page`](/css/at-rule-page/), определяет первую страницу печатного документа. **Примечание.** Вы не можете изменить все свойства CSS с помощью этого псевдокласса. Вы можете изменять [`margin`](/css/margin/), [`orphans`](/css/orphans/), [`widows`](/css/widows/) и разрывы страниц документа. Кроме того, при определении `margin` вы можете использовать единицы абсолютной длины. Все остальные свойства будут игнорироваться.
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Paged Media Module Level 3](https://drafts.csswg.org/css-page-3/#left-right-first) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/page.html#page-selectors)

Синтаксис

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

Синтаксис

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

Примеры

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").onclick = function () {
  window.print();
}

Примеры

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").onclick = function () { window.print(); }

Содержание

  • Синтаксис
      /* Selects the first page when printing */ @page :first { margin-left: 50%; margin-top: 50%; }
  • Значения
    • Примеры
        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").onclick = function () { window.print(); }

    В начало