:first
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023년 8월.
Want more support for this feature? Tell us why.
CSS :first 의사 클래스는 @page @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.
css
/* Selects the first page when printing */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
구문
Error: could not find syntax for this item예제
HTML
html
<p>First Page.</p>
<p>Second Page.</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 # first-pseudo |