CSS page groups

<!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>