HTML: Keeping h1 and h2 together

Question

I am using Oxygen XML Editor’s built in DITA XML to HTML with CSS transformation to create a paged-media output. In each chapter, I want to start each section on a new page. To do that I added a css entry of:

h2 {
page-break-before: always;
}

But, when I do that, of course it puts a page break between h1 and h2. I want h1 and h2 to stay together on the first page of each new chapter, but I want each subsequent h2 to start on a new page.

Does anyone have any ideas how I can accomplish this in the css?

Thank you! PJP

Answer 1

Untested, but you could try breaking or not breaking per-article:

article {
  page-break-before: always;
}

article:first-of-type {
  page-break-before: auto;
}

Breaking on the h2 would be a variation on that:

article h2 {
  page-break-before: always;
}

article:first-of-type h2 {
  page-break-before: auto;
}