Page selectors
:first は CSS の擬似クラスで、@page アットルールで使用され、印刷文書の最初のページを表します。（一般的なノードの最初の要素については :first-child を参照してください。）
css
/* 印刷時に最初のページを選択 */ @page :first { margin-left: 50%; margin-top: 50%; }
メモ: この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 orphans、widows、ページ区切りのみです。さらに、マージンを定義するときには絶対的な長さの単位のみしか使用できません。他のすべてのプロパティは無視されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 18 | 12 | 116 | 6 | 18 | 6 | |
| その他 | ||||||
| 左側のページの疑似クラス (`:left`) | 6 | 12 | | 5 | 18 | 4.2 |
| 右ページ疑似クラス (`:right`) | 6 | 12 | | 5 | 18 | 4.2 |
基本構文
CSS
@page :first {
margin-top: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}ライブデモ
実務での使いどころ
-
見開き印刷のマージン設定
書籍スタイルの印刷物で、綴じ側のマージンを広くし、左右ページで対称的なレイアウトを実現します。
注意点
- Firefoxでは:leftと:rightのサポートが不完全なため、クロスブラウザ対応が必要な場合は注意してください。
アクセシビリティ
- ページセレクターによるスタイル変更は印刷メディアのみに影響し、スクリーンリーダーには影響しません。