选择页面上的最后一个元素（页面媒体）

Question

I want to select the last element on a printed page. For example, given this HTML (assuming the printed page has a height of 100px):

<!-- other content before -->

<div id="TheThing">
  <section id="a">Some content</section>
  <section id="b">Some content</section>
  <section id="c">This will be the last section on the page</section>
  <section id="d">This section will start on the next page</section>
  <section id="e">This is the last section</section>
</div>

<!-- other content after -->

and this CSS:

#TheThing {
  page-break-before: always;
  page-break-after: always;
}

section {
  height: 30px;
  border-bottom: solid 1px black;
  page-break-inside: avoid;
}

I want to be able to select the last element on each printed page , in this case #c (and also #e , although if necessary, this could be easily excluded with :not(:last-child) ) and remove its border.

Approximation of desired output:

Currently I'm using Prince XML. I prefer not to do with it JavaScript.

Is it possible?

Answer 1

Prince's founder and lead programmer has stated in their forum that this is not possible without JavaScript and running the document twice through Prince. Sorry :(

https://www.princexml.com/forum/topic/3672/how-to-select-the-last-tr-element-of-a-page-when-it-breaks

Answer 2

I don't think this can be controlled. The main reason is that there is no such thing as "last in page" because depending on the paper you are printing on, more elements could be there and this takes place after the CSS is applied to the HTML elements, and your document has no way of accessing this information.

But, if you know yourself 100% what type of paper you will be using to print it, let's say A4, you can set a height to the parent and child elements and then with a simple :nth-child() pseudo-selector you will be able to control which one to select to apply the style. This is because you know the A4's height, so you can predict accurately, supposing none will add any different options to the Print Preview page (ie zooming, etc.). Also, you could put this CSS inside the @media print , so it is applied only to the printed pages.