: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…