--- title: ':first' slug: 'Web/CSS/:first' tags: - '@page' - CSS - CSS ページ化メディア - Layout - Pseudo-class - Reference - Selector - Web translation_of: 'Web/CSS/:first' ---
{{CSSRef}}

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

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

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

構文

{{csssyntax}}

例

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();
});

結果

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

{{ EmbedLiveSample('Examples', '80%', '150px') }}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}} {{Spec2('CSS3 Paged Media')}} 変更なし。
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}} {{Spec2('CSS2.1')}} 初回定義。

ブラウザーの互換性

{{Compat("css.selectors.first")}}

関連情報