Combining @page with other selectors

Question

I have a CSS that contains elements that should appear conditionally.

For most elements, this is easy: I have an attribute attached to the body element, and I can use that in the CSS:

body[data-var-draft=Draft] .heading1 {}

That doesn't seem to work for @page elements though:

body[data-var-draft=Draft] @page {}

leads to an error message in Antennahouse Formatter (6.6).

I've seen more constraints for @page rules:

@page titlepagesection, @page tocsection, @page chaptersection {}

doesn't seem to work either.

Is it/should it be possible to combine @page with other selectors?

Answer 1

An @page rule is selected by the page property value. To select a particular named page in a particular context, set the page property value in the rule for that context:

@page draft {
  background-image: url('draft-watermark.svg');
}

body[data-var-draft=Draft] {
  page: draft;
}

There is an illustrated example in Chapter 3, Page Layout, in 'Introduction to CSS for Paged Media' available at https://www.antennahouse.com/css/.