1

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?

Dimitris Damilos
  • 2,363
  • 5
  • 23
  • 46
DJL
  • 2,060
  • 3
  • 20
  • 39
  • Have you tried putting the needed CSS rules in the media query `@media print {}`. You can read further details [here](https://benfrain.com/create-print-styles-using-css3-media-queries/). – Dimitris Damilos Sep 06 '17 at 13:27
  • I don't see how a media query will help here. Can you expand? – DJL Sep 06 '17 at 13:35
  • I will post it as an answer below – Dimitris Damilos Sep 06 '17 at 13:43
  • 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 – jamespaden Sep 07 '17 at 13:23
  • This is the answer I both feared and expected. Thanks. If you make it a full answer I'll accept it. – DJL Sep 07 '17 at 14:45

2 Answers2

2

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

jamespaden
  • 448
  • 2
  • 10
0

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 (i.e. zooming, etc.). Also, you could put this CSS inside the @media print, so it is applied only to the printed pages.

Dimitris Damilos
  • 2,363
  • 5
  • 23
  • 46
  • Well in my actual document the elements are not fixed size, I only did that to demonstrate the question. So nth-child won't really work for that reason. Anyway, I'm not talking about printing from a browser here, I'm talking about a PDF conversion, so your assertion that "this takes place after the CSS is applied to the HTML elements, and your document has no way of accessing this information." is incorrect. For example, CSS in Prince can find page numbers of elements that occur _later_ in the document (`target-counter`, something browsers can't generally do. – DJL Sep 06 '17 at 13:54
  • 1
    Ah I see. Well, this wasn't clear from the initial question. I will try to search for something to help you. Four eyes are better than two. – Dimitris Damilos Sep 06 '17 at 16:19