Псевдокласс CSS `:first`

Baseline Ограниченная доступность

Эта функция не входит в Baseline, поскольку не работает в некоторых наиболее широко используемых браузерах.

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

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

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

Синтаксис

:first {
  /* ... */
}

Примеры

Использование `:first` для стилей печати страниц

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

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

@page :first {
  size: 8.5in 11in;
  margin-left: 3in;
  margin-top: 5in;
}

p {
  page-break-after: always;
  font: 1.2em sans-serif;
}

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

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

Спецификация
CSS Paged Media Module Level 3 # first-pseudo

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`first`	18	12	116	9.2	6	18	116	10.1	6	1.0	4.4	6

См. также

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

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