:first

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

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

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

構文

:first

例

HTML

<p>最初のページです。</p>
<p>2枚目のページです。</p>
<button>印刷</button>

CSS

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

p {
  page-break-after: always;
}

JavaScript

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

結果

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

仕様書

仕様書 状態 備考
CSS Paged Media Module Level 3
:first の定義		 草案 変更なし。
CSS Level 2 (Revision 1)
:first の定義		 勧告 初回定義。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung 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

凡例

完全対応  
完全対応
未対応  
未対応

関連情報