Hide all elements of a page except a specific div - html

Question

I want to hide all the elements on the page, but only show the contents of div.k1. There are many more elements on the page. How do i do it in pure CSS?
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div> 11,12,13..

Answer 1

If all the elements you want to hide are div's that are directly within the body you can do something like the following.
var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
Basically what this does is select all the div elements that are directly within the body that do not have the class k1. Then it does a for loop on those items and sets each item to not display.
For a CSS solution you could just do something similar if the conditions are the same as I mentioned above.
body>div:not(.k1) {
display: none;
}
If you are interested in learning more about CSS selectors I'd encourage you to take a look at the W3 schools page on it.

Answer 2

Here's a crude way of doing this for divs nested up to 2 layers deep (as in your example). As you can see here, the problem is hiding all divs based on the tagName ('div'), unless they either have the className "k1" or are children of a div with that className. So we actually have to check at least 3 conditions before applying the hidden property. You can, of course, go deeper, if needed, by adding parentNode.parentNode.parentNode... and so on. But I would almost certainly approach this instead by assigning a class to the elements I want hidden, with an ID on the one I want to reveal. This is just a way of doing the job without changing any of your html.
const allDivs = document.getElementsByTagName('div');
for (let i = 0; i < allDivs.length; i++) {
if(allDivs[i].className !== "k1" && allDivs[i].parentNode.className !== "k1"){
if (allDivs[i].parentNode.parentNode.className !== "k1"){
allDivs[i].hidden = true;
}
}
};
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
Cheers!