Hide all, show a class with css


Tags: html,css,css3,printing

Problem :

Context: making printable invoices to generate in a browser.

It's common in making printable webpages to use an @media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.

Structure is something like this:

<body>
    <div id="topMenu">...lots of elements...</div>
    <div id="sideMenu">...lots more...</div>
    <div class="tools">...some tools...</div>
    <div class="printing">...some elements I want to print...</div>
    <div class="tools">...more stuff I don't want to print...</div>
</body>

Stuff I've tried:

Ideally, I'd like to do something like

body * {
    display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
    display: block !important;
}

But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.

The suggestion in CSS: "display: auto;"? seems to only work for JS.

Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.

In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.

I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.

My questions:

What is the best way to hide everything and target certain elements for display when they don't all share a common display property?

What exactly does box-suppress do?



Solution :

Since you specifically tagged this CSS3, try using CSS3!

body>:not(.printing) {
    display: none;
}

This should work for the example you gave. I hope it works for your real-world application!


To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display


    CSS Howto..

    Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

    How does tablesort.js create the sort indicator arrows

    how to tag multiple elements? [closed]

    How to separate different properties of a css gradient?

    How to detect mouse is over a child element in jQuery?

    Show nav once the nav has been hidden

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    How to add a delay between cycles of css animation [duplicate]

    Show div only on Homepage using only JS & CSS

    How implement a button clear in a RadDatePicker

    How to center an element horizontally and vertically?

    How to make a CSS button work correctly?

    How to convert UPPERCASE text to Title Case using CSS

    how to put image and texts on img html css

    how to arrange the sequence of js and css files in webpage?

    How to enable CSS editor features in VS 2012?

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    HTML CSS how to adapt text on a Div's size [closed]

    How to wrap Font-Awesome with CSS?

    how to apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    How to have a sidebar on the right in a responsive page with maximum width?

    Showing the percentage of poll's progress bar outside progress bar

    How to add custom fonts [duplicate]

    How can I create the shape of side mirrors of a truck/lorry?

    How to display html with css stylesheet in TextView?

    How can I use CSS to keep content in its own column?

    How to fix an image to the bottom right with resizing window?

    How can I apply CSS to elements created with javascript in IE?

    how to make css for work for different mobile sites