CSS Print, header only on first page width css

Question

I have a logo inside the Logo tags. For printing style i made a @print media query css. If i print it out the logo will printed on every page - but it should only shown on the first page.

Tried with that:

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

but so the header will deleted on every pages! Any tipps? Thanks

@page:first header { display:block; } This is enough to do the magic — Selvam Elumalai, Dec 08 '16 at 12:12
Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — jafarbtech, Dec 08 '16 at 20:19
@SelvamElumalai @ page:first header { display:block; } not working for me — Imran, Jan 21 '21 at 15:11
@Imran, can you share you code so can I check the css together? — Selvam Elumalai, Jan 22 '21 at 16:11

score 0 · Answer 1 · edited Oct 15 '21 at 21:11

0

You can provide a condition to CSS telling it to not apply the header on any page except the first.

header { display:block; }
@page :not(:first) {
   header { display:none; }
}

The predicate :not(:first) prevents the header being displayed on subsequent pages.

edited Oct 15 '21 at 21:11

Bob Dalgleish

8,057
4
31
41

answered Oct 15 '21 at 14:17

Mujtaba Haroon

93
7

1

Doesn't work, sadly. I assume it's because you can only set basic css properties with :first: https://developer.mozilla.org/en-US/docs/Web/CSS/:first – Jonas Feb 12 '22 at 14:07

CSS Print, header only on first page width css

1 Answers1

Linked