CSS Media Print @page different properties for each page

I hope this helps you . Why css file contains media directives ? Or is there some reason for them, this css is created by proffessionals ?
Because it could be used for different media (e.g. screen, print, etc)

wish help you to fix your issue I'll answer my own question, in case someone stumbles upon this in the future. The solution is obnoxiously simple - instead of using @extend, write a mixin and use @include:

@mixin print-styles {
  // all of my print styles here
}

.my-print-page {
  @include .print-styles;
}

@media print {
  @include .print-styles;
}

hope this fix your issue The correct syntax (according to MDN) for first page is:

@page :first {
   /* .... */
}

wish of those help After a while doing some research I think I got something cooking here which still needs some testing in different browsers, and maybe some perfectioning. For now, I've tested and seems to be working fine in Chrome.
Basically, blending in a little of both techniques I was able to create this idea that replicates (on load) a h3 for each p in the work (just so it runs enough for each page). They have position: absolute and each one subtracts 100vh so they go to the bottom of the other page.

Any of those help I have a dynamic web page that is generated when a user clicks to view more details on a car. I basically want a button that says 'Print Details' so the customer can print the vehicle details, but I don't want it to print the header and footer just the bits in the middle. So I currently have (without pasting allll my code) a div with my header and a div with my footer. Then I have a section tag using the class's 'section white'. When the user clicks print, I want to print JUST the section tag and everything inside it. However currently when I've tried this I just get a blank page.. ,

body * { 
    visibility: hidden !important;
}

.section .white { 
     visibility: visible !important;
}

<section class="section white">

.section.white {}

<section class="section white">
</section>

body > :not(section):not(.white) {
    visibility: hidden;
}

<header>
  This is the header
</header>
<section class="white">
  <p>This is a section</p>
  <p>...</p>
</section>
<footer>
  This is the footer
</footer>