Can I use CSS to set up different default print page sizes for different pages

Question

I have a number of pages which I'd like to set up so that printing defaults to A4 landscape in somecases but A3 portrait in others.

Based on the answer in css print styling I have tried to set up the following in a print.less file

@media print{

  .print-portrait-a3 {
    @page {
      size: A3 portrait;
      margin: 0.5cm;
    }
  }

  .print-landscape-a4 {
    @page {
      size: A4 landscape;
      margin: 0.5cm;
    }
  }

  .print-portrait-a4 {
    @page {
      size: A4 portrait;
      margin: 0.5cm;
    }
  }
}

I'm then putting .print-portrait-A3 classes etc at the top of the page sections that I'm printing to try and get them to print to the different page sizes.

However, I can't get this to work - whichever is the last style in my css is the one that gets used by all pages.

I'm only really just beginning with CSS (probably obvious that I don't have much of a clue) so would appreciate some explanation to sort out my misunderstandings.

I'm using jade and bootstrap

Answer 1

I don't think you can nest CSS under a div, just under a media query. Here is some untested code adapted from http://www.w3.org/TR/css3-page/#page-size-prop:

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page .print-landscape-a4 {
       margin: 3cm;
       size: A4 landscape;
    }
 }

You might also look at https://stackoverflow.com/a/14621368/1584531