CODEWITHSUNDEEP
htmlcss
Renato Souza de Oliveira
Renato Souza de Oliveira

Reputation: 4574

Print CSS Hide the body and show a div inside the body

I found too much content on how to hide specific parts using css.

I do not want to hide multiple divs:

#flash,#menu,#anuncios { display:none; }

but I need to hide the whole body and just show a div inside the body.

I tried to set the body as:

body {
    display:none;
}

.print {
    display:block!important;
}

But everything is hidden.

How to hide all the content of the site with just one command? And show a div inside the site

Upvotes: 0

Views: 2079

Answers (2)

VXp
VXp

Reputation: 12058

You can combine the all/universal (*) and :not selectors:

body *:not(#flash):not(#menu):not(#anuncios) {display: none}
<div>Not here...</div>
<div id="flash">Hello</div>
<div id="menu">World</div>
<div id="anuncios">!</div>
<div>Also missing...</div>

Upvotes: 3

elicohenator
elicohenator

Reputation: 747

I've done that in a website - wrap all the content you want to hide in some tag (mine is called .main-content, and add the following styles and elements: 

<style>
    #print-message {
        display: none;
        direction: ltr;
        color: black;
        font-weight: bold;
        text-align: center;
        margin: 2rem 0;
    }
    @media print {
        .main-content {
            display: none;
        }
        #print-message {
            display: block;
        }
    }
</style>

This is the div that would show when the user tries to print things:

<div id="print-message">
    Printing Unavailable.
</div>

Upvotes: 0

Related Questions