Search code examples
cssprincexmlcss-paged-media

Selecting the last element on page (paged media)


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:

Desired output

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

Is it possible?


Solution

  • 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