Menu
Suppose my web page has a struture like this:
<body>
<div id="fee">
<div id="fi">
<div id="actual_content">
<p>Content</p>
<div id="some_important_stuff">Blah</div>
<p>More content</p>
<span class="and_another_thing">Meh</span>
...
</div>
<div id="fo>
...
</div>
...
</div>
<div id="fum">
...
</div>
...
</div>
<div id="fazz">
...
</div>
...
</body>
I want to create a print CSS style that hides everything except for the contents of actual_content.
My first attempt was like this:
body * {
display: none; /* Hide everything first */
}
/* Show content div and all of its ancestors */
body > #fee {
display: block;
}
body > #fee > #fi {
display: block;
}
body > #fee > #fi > #actual_content {
display: block;
}
/* Unhide contents of #actual_content */
#actual_content * {
display: block; /* Not ideal */
}
However, since there's no "display: auto" or "display: default", I mess up the styles of actual_content's items when I try to unhide them. I also don't like hard coding the path to actual_content since it might change.
574
You probably want to use the visibility property. W3Schools describes the difference between the display and visibility properties: the visibility property affects the visibility of an element without affecting its structure, i.e. the space it would normally occupy on the page.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
