<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS page groups</title>
<style>
@page {
size: 220pt 80pt;
margin: 5pt;
padding: 5pt;
}
@page chapter {
background: lightyellow;
}
@page sub-chapter {
background: lightblue;
}
@page :nth(0n + 1 of chapter) {
border-top: red 5pt solid;
}
@page :nth(0n + 1 of sub-chapter) {
border-top: midnightblue 5pt solid;
}
html { font-size: 10pt; line-height: 10pt; }
p { margin: 0; }
p.break { break-before: page; }
.chapter { page: chapter; break-after: page; break-before: page; }
.sub-chapter { page: sub-chapter; break-after: page; break-before: page; }
</style>
</head>
<body>
<div>Default 1</div>
<div class="chapter">
<p>First Page (Chapter I)</p>
<div class="sub-chapter">
<p class="break">Second page</p>
<p id="end" class="break">Third page</p>
</div>
<p id="new" class="break">Fourth page</p>
<p class="break">Fifth page</p>
</div>
<div class="chapter">
<p>First Page (Chapter II)</p>
<p class="break">Second page</p>
<p class="break">Third page</p>
<p class="break">Fourth page</p>
<p class="break">Fifth page</p>
</div>
<div id="last">Default</div>
</body>
</html>
