:first
:first
は CSS の擬似クラスで、@page
アットルールで使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については :first-child
を参照してください。)
css
/* 印刷時に最初のページを選択 */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
構文
:first
例
HTML
html
<p>最初のページです。</p>
<p>2 枚目のページです。</p>
<button>印刷</button>
CSS
css
@page :first {
margin-left: 50%;
margin-top: 50%;
}
p {
page-break-after: always;
}
JavaScript
js
document.querySelector("button").addEventListener("click", () => {
window.print();
});
結果
[印刷]ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。
仕様書
Specification |
---|
CSS Paged Media Module Level 3 # left-right-first |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
First page pseudo-class ( :first ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.