Question

I have a few divs with text that have display:none set. While on the screen I have a functionality that changes it to display:block when I click other elements.

<div class="hiddenText" style="display:none">My hidden text</div>

I need to print the page and show all text. I added css file for print and specified display for hidden text

@media print {
   .hiddenText {
       display: block
   }
}

All styles for printed version of the document work great, except this. What is the best way to make it printable?

Answer 1

Your inline styles have precedence over the rules specified elsewhere. To override inline styles you can use the !important keyword to force the rule.

Something like this will probably do the trick:

@media print {
   .hiddenText {
       display: block !important;
   }
}

Even though !important has nothing to do with CSS specificity, MDN has a section in its article on the topic that discuss !important.

When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.