:first
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年8月以降、すべてのブラウザーで利用可能です。
:first は CSS の擬似クラスで、@page アットルールで使用され、印刷文書の最初のページを表します。（一般的なノードの最初の要素については :first-child を参照してください。）
css
/* 印刷時に最初のページを選択 */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
構文
css
:first {
/* ... */
}
例
ページ印刷スタイルに :first を使用
［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。
html
<p>最初のページです。</p>
<p>2 枚目のページです。</p>
<button>印刷</button>
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();
});
仕様書
| 仕様書 |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |