Forum How do I...?

Select elements that are only on page n

aflott
How do I select an element only on pages after the first?
mikeday
What is it you are trying to do with the element?
aflott
I want to manipulate the CSS properties of that element on whatever page I've asked for

If I had to make up the syntax, I'd probably do something like this:

@page:number(2) .some_elements {
     display: block;
}


Or something close to that.
mikeday
This is tricky, as CSS assigns a final value for every style property of an element before that element is formatted or paginated. It is not possible to determine property values according to the current page without making some fundamental changes to the way CSS works.

We have various workarounds for some situations, such as changing the margin depending on whether the element occurs on a left-facing or right-facing page, using new properties (margin-inside and margin-outside). However, we need to address these on a case by case approach, due to the fundamental limitation described above.
aflott
I figured this was going to be a hard thing to accomplish. That or I can't think of a more clever way to do what I want (I was asking about a general way to handle "stuff" not on the first page).

Thanks for the help and clarification.
howcome
aflott wrote:
I want to manipulate the CSS properties of that element on whatever page I've asked for


What you are asking for is a layout-driven feature. That is, you want to style content based on the content's placement in the layout, not in the logical structure of the document. CSS has a few of these already. For example, the :first-line pseudo-element allows styling of all words on the first line of an element. One could imagine a similar pseudo-element for all words on the first page.

It must be admitted, however, that the cost of implementing the :first-line pseudo-element outweighted its visual benefits. I think the same will be the case for :first-page.

Also, you can set different background colors and different margins on different pages.

May I ask why you want this feature? What kind of styling are you looking for? Would there be a way to attach the style properties to the logical structure rather than to the formatted output?
aflott
howcome wrote:
May I ask why you want this feature? What kind of styling are you looking for? Would there be a way to attach the style properties to the logical structure rather than to the formatted output?


I agree with you that it is silly, but in the context of page layout (with is which I'm using Prince for) it makes it difficult for these kind of scenarios. But I have no control over another's crazy request...

I was asking about it in a very general way.

What is happening is I have n large tables that can span n pages. Or just 1 table that can (most likely won't) span 2 pages. And when one of the <tbody>'s spills over into the next page I used a <caption> and prince-caption-page: following to make the caption show on the second page. Note there will always be be another tbody after the variable length one. Had that last tbody been before the variable one this wouldn't be a problem, but I can't change that.

So the case that came up was when there was just enough of this variable length section to fit entirely on one page and the last section gets pushed to the second my <caption> "Section continued..." shows up and looks like missing data since that section ended on the first page.

Hopefully that makes a little more sense of what I'm actually trying to accomplish since the sort of control I wanted is violating what CSS was intended for.
rwilhelm
Not trying to hijack the thread, but my question is related to layout driven styling. Is there a way to style and element based on what column is appears in? My guess is no.

I have a two column layout and in lines where I have an hfef, I would like to put an arrow against the margin of the page. The problem is that while I can do something like this:

marginitem {
float: left;
margin-left: -10mm;
text-align: center;
content "->"; //To be replaced by real arrow from 'dings font
}

that will only work for the left column. The right column would require an a corresponding 'right' for the float and margin.
oliof
You can actually do "float: outside"; but that wouldn't turn the arrow around. For that you'd need to work with "@page:left" and "@page:right" and set the href styling there to get right and left pointing arrows.
mikeday
Similarly with pages, it isn't yet possible to change the style of an element based on the column in which it appears. It would be good to be able to do this, but we need to invent a new styling mechanism first.