hide everything except div of id-CodePudding

I'd like to hide everything except div of certain id when printing but following code does not work.

*:not(#printArea) {
  display: none;
}

<body>
  <div id="printArea">...</div>
  <button>print</button>
</body>

Such CSS hides everything. It does not ignore the printArea. How can I achieve this? How can I hide everything, every selector except the one of id printArea?

CodePudding user response：

* will apply style to all html tag present in the tag even body

the correct syntax should be

 parent *:not(#printArea) {
   display: none;
 }

body *:not(#printArea) {
  display: none;
}

<body>
  <div id="printArea">...</div>
  <button>print</button>
</body>

CodePudding user response：

*:not(html,body,#printArea) {
  display: none;
}

<body>
  <div id="printArea">...</div>
  <button>print</button>
</body>

CodePudding user response：

The Problem

What you are doing doesn't work. This is because you are setting the display property to all the elements, which includes the body and the html. display: none hides the element, along with its children, and thus when the body is hidden, everything on the page is too. To avoid this, there are 2 methods (off the top of my head) that you can use.

Solution 1:

You can edit the selector such that it selects everything inside the body, but not the body itself. It would look something like this:-

*:not(html, body, #printArea) {
  display: none;
}

Solution 2:

You can use the visibility property instead, because it doesn't affect the visibility of its children. This could look something like this:-

* {
  visibility: hidden;
}

#printArea {
  visibility: visible;
}