Changing text color on the `:nth` page of a @page element

[netr]

I've been trying to figure out how to change the text color only on the first page. I'm trying to create an inverted-colors effect on some pages using :nth.

.chapter {
    page: chapter;
}


@page :nth(1 of chapter) {
    background: #000;
    color: #fff;
}

<section class="chapter">
  Testing testing testing. Should be white, but it's not.
</section>

This works for text like string sets, but I can't get it to work for the page content.

Any help or suggestions would be greatly appreciated.

[liZe]

Hi!

This would be really useful to have this feature, but because of the way CSS works it’s actually not possible this way. The properties applied to the page are not applied to the page content:

<style>
  @page { color: red !important }
</style>
<section>
  This text is not red.
</section>

As far as we know, currently, CSS doesn’t provide a way to do what you want. 😢