CODEWITHSUNDEEP
htmlcssprinting
Daniela Donna
Daniela Donna

Reputation: 270

@page :first not working

I have to use two different headers in the print version: one for the first page and one for the other pages. I would like to put a header (fixed on the top) for the other pages and use the css display: none for the first page. But I have not any effect with @page :first. This is my code:

@page :first {
    .header {
        display: none;
    }
}

I tried also putting !important in the css but nothing happens. What should I do?

Upvotes: 5

Views: 10951

Answers (4)

Joe
Joe

Reputation: 1

I don't know if this is your issue, but mine was order of operations.

I had to have

@page :first{
  @top-right{
    content: none;
  }
}

Appear before any other @page instructions for the remaining pages. Then it worked and I was able to make a unique title page.

Upvotes: 0

Dennis
Dennis

Reputation: 8111

It looks like it's a Mozilla bug. I am not able to get margins working, even when following their own example here:

https://developer.mozilla.org/en-US/docs/Web/CSS/:first

Both pages are printed in an identical way, no difference.

Upvotes: 1

DominikAngerer
DominikAngerer

Reputation: 6530

According to: https://developer.mozilla.org/en/docs/Web/CSS/@page

The @page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

And also for the :first https://developer.mozilla.org/en-US/docs/Web/CSS/:first

Note: you cannot change all CSS properties with :first. You can only change the margins, orphans, widows, and page breaks of the document. All other CSS properties will be ignored.

So since you're trying to remove one of your own elements - try using media queries instead:

@media print {
  .header { display: none; }
}

https://benfrain.com/create-print-styles-using-css3-media-queries/

Upvotes: 2

Archana
Archana

Reputation: 103

:first allows only few CSS properties. You can only change margins, page breaks and windows with it.Other CSS properties will be ignored. So i assume display:none may not work.

Though you can refer more about how to use @page and with what type of CSS properties it works.

https://developer.mozilla.org/en/docs/Web/CSS/:first

Upvotes: 4

Related Questions