:first

Baseline 2023
Newly available

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

:first は CSS の擬似クラスで、@page アットルールで使用され、印刷文書の最初のページを表します。（一般的なノードの最初の要素については :first-child を参照してください。）

css
/* 印刷時に最初のページを選択 */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

メモ: この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 orphans、widows、ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。

構文

css
:first {
  /* ... */
}

例

ページ印刷スタイルに :first を使用

［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。

html
最初のページです。


2 枚目のページです。
css
@page :first {
  size: 8.5in 11in;
  margin-left: 3in;
  margin-top: 5in;
}

p {
  page-break-after: always;
  font: 1.2em sans-serif;
}
js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

仕様書

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

ブラウザーの互換性

関連情報