How to hide an element when printing a web page with CSS?

Spread the love

To hide an element when printing a web page with CSS, we use the @media print query.

For instance, we write

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

to hide elements with class .no-print and everything inside them with display: none when the page is being printed with the @media print rule.

By John Au-Yeung