There is an issue where my page background is visible in a special print view. I want to identify my print view container with a specific class, let's say '.print'. My goal is to find a solution where I can define a CSS rule that targets the '.print' container itself, its parents, and children specifically, leaving everything else unaffected by the rule. This way, all other DOM elements can be styled using a display:none CSS rule.
Here is a sample code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
/* Hide all divs except those containing .print */
:not(:has(.print)) {
display: none;
}
.print, .print * {
display: unset; //!!!This part is not okay because under print there could be a child with display: block/flex or other value.
}
</style>
</head>
<body>
<div></div> <!-- this should be hidden -->
<div>c <!-- this should be displayed as block -->
<div>b <!-- this should be displayed as block -->
<div class="print">p <!-- this should remain untouched by the rules -->
<div>a</div> <!-- this should remain untouched by the rules -->
</div>
<div></div><!-- this should be hidden -->
<div></div><!-- this should be hidden -->
</div>
</div>
<div></div><!-- this should be hidden -->
</body>
</html>
I am seeking assistance in merging these two rules without overriding the display property set under '.print'. Can any CSS expert provide guidance on creating such a comprehensive rule or ruleset that works universally to achieve the desired outcome described in the example?
I am trying to target every div element where there is no letter content (c, b, p, a).
If possible, I would like to avoid using JavaScript for this task.