Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can style "display: block" overrule "display: none" of media print CSS?

Here is an HTML element:

<div id="cboxOverlay" style="display: block; opacity: 0.9; cursor: pointer;" class="price_match_no_print"></div>

Here is some CSS:

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

Now when I print the page, the above HTML element comes on the print?

Does the style display: block overrules the display: none of @media print?

like image 400
Debiprasad Avatar asked Dec 16 '22 10:12

Debiprasad


1 Answers

@media rules themselves don't have any specificity and because you're adding CSS rules via inline styles, they will always override any external styles that aren't using an !important rule. So in this case, your only option is:

@media print {
    .price_match_no_print {
        display:none !important;
    }
}
like image 117
Adrift Avatar answered May 25 '23 04:05

Adrift



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!