CODEWITHSUNDEEP
cssprintingcss-selectors
Prashant
Prashant

Reputation: 23

CSS 3 not selector for print media

I am trying to print a part of my entire html document. I am using the below css to do that. 

@media print { body * {
    visibility: hidden;
}
#print-area * {
   visibility: visible;
}}

It is working but as visibility:hidden reserves the space, it is printing a blank page and my content. I was trying to use :not selector from css3 to set all other divs but "print-area" to display:none as below,

div:not(#print-area){ display:none; }

This will result into a print of blank page. Looks like :not selector is not working with media print. Any suggestions/solutions for this will be most welcome.

Thanks

Upvotes: 2

Views: 1186

Answers (3)

Orangepill
Orangepill

Reputation: 24665

Change the style rule for print media to be 

:not(#print-area){ display:none !important; }

It's likely that any standard css reset in play on the page is outranking this style rule.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

visibility: hidden; holds the space and it is hidden only. Show use display: none; to your body.

@media print { #wrapper {
    visibility/: hidden;
    display: none;
}
#print-area {
   visibility/: visible;
   display: block;
}}

Edit you should also declare for screen

@media screen { #wrapper {
         display: block;
}

Upvotes: 1

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

use this : 

:not(#print-area){ display:none; }

Upvotes: 1

Related Questions