@media print css

Question

Maybe these questions can be labeled "idiot", but believe me, I really need to ask this here because I have not found anywhere on the Internet and who can help me I will be very grateful...

Is there any way to do 2 (two) or more "@media print" of css? For example, I made one to print a certain div, now I want to print another totally different div with other formatting settings, as I would using @media print itself?

Taking advantage of the question, there is some way to format the div as desired before having printed by javascript, I did not like the javascript printing, comes almost nothing of what was done on the page other than pure writing. '-'

@media print {
body * {
    visibility: hidden;
}
.noneImprime
{
    display: none;
}
#imprime, #imprime * {
    visibility: visible;
    margin-top: -160px !important;
}
#imprime
{
    width: 1100px;
}
.btn-resultado{
    display: none;
}
@page{
     size: landscape;
    }
}

Above is the code I am using to print my div with the ID: print, however I have another div, which in my case is the content of a modal to print, how do I print only the desired content as it correctly shows above and in the same print print print only the content of my modal? In this case every time I click on the designated button it will always print the same div.

Answer 1

To format two different div’s, put different classes in it and place the different properties inside the @media print

To test how it works before generating javascript printing you can go to 'More tools > Rendering Settings > Emulate media > print' from the Chrome developer tool:

You’ll probably have to use some !important to overwrite the standard print sheet style and how you will do this within the print media query, it is quite quiet.