: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
: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();
});
仕様書
| Specification |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |
ブラウザーの互換性
Loading…