css :first-of-type in general and on a page level

[bashuss]

Is your feature request related to a problem? Please describe.
:first-of-type selector on a page level would allow to make items visible on top of the page, which are usually invisible. This could be a way to show a current value of a calculation after a page break.

Describe the solution you'd like
Something like:

basic css concept

.intermediate-result, .intermediate-result:first-of-type { // in general an especially the first in the document
  visibility: hidden;
}

.intermediate-result:page-first-of-type { // the first on a page
  visiblility: visible;
  page-break-inside: avoid;
  page-break-after: avoid;
}

basic HTML concept

...
<li><span class="intermediate-result">$12</span>
<span>5 x $3 = $15</span></li>
<li><span class="intermediate-result">$27</span>
<span>7 x $2 = $14</span></li>
<li><span class="intermediate-result">$41</span>
<span> ...

should hide the first item in the document and all items which are not the first on the page.

Describe alternatives you've considered
Variables which can be updated for different positions in the document. The output should reflect the current rendering position.
Could be done like this:
<SetVariable name="intermediate-sum">$14</SetVariable> to update the value
<Variable name="intermediate-sum" /> to output the value at a specific position e.g. the header or footer.
or with {{ }} syntax.

Additional context
Think about invoices spanning multiple pages. Having an intermediate sum on the page top would be nice.
:page-last-of-type would be also useful.

I guess, the problem is, that page related selectors only work on document where pagination has already been calculated, and yet the selector may change the layout and therefore pagination again.
So the selector needs to be evaluated after a page has been finished for the remaining html content.

[richard-scryber]

Thanks Bernd, I really like the SetVarialble method, and had previously considered using the var tag to a similar effect of allowing data variables (new or existing to be set..

<var name='newVar' value='{{bind a value}} />

Without content nothing would be displayed.

I will have a think too, see what / how it could be achieved with the current code base.