Selektor :not z dziedziczącymi elementami

Question

Cześć

Ogólnie to chciałem dać na druk tylko określony element.

Ogólnie to działa ale tylko dla dosłownie danego elementu a już nie dla elementów które są w środku

 

    <style type="text/css" media="print">
                #app :not(.print) {
                    display:none
                }
        </style>

 <div>
         To się nie drukuje
        <div class="print">
            Ten cały div ma się drukować
            <p>To już się nie będzie drukowało</p>       
        </div>

    </div>

Macie jakiś pomysł?

Answer 1

A nie lepiej ukryć wszystko i pokazać tylko .print? Będzie łatwiej niż kopać się z :not().

Comments

     <style type="text/css" media="print">
                #app {
                    display:none;
                }

                .print {
                    display:block 
                }
    </style>

   <div id="app">
        <p>To ma się nie drukować</p>
        <div class="print">Tylko to ma się drukować
            <p>To też</p>
        </div>
    </div>

Jak schowam całość to poślednie elementy nie nadpiszą schowania nadrzędnego elementu , tutaj nic się nie wydrukuje.

P.S Hmm nawet dziwne, z visibility nawet dziala

  <style type="text/css" media="print">
                #app {
                    visibility:hidden;
                }

                .print {
                    visibility:visible;
                }
    </style>

 <div id="app">
        <p>To ma się nie drukować</p>

        <div class="print">Tylko to ma się drukować
            <p>To też</p>
        </div>
    </div>

To działa , ale schowane elementy 'zajmują' ekran tak jak to jest z visibility

---

Użyj selector-a  Universal selector ( * )

<style>
  @media print {
    #app * {
      display: none;
    } 
    .print, 
    .print * {
      display: block !important; 
    }
  }
</style>

<div id="app">
  <p>To ma się nie drukować</p>

  <div class="print">
    Tylko to ma się drukować
    <p>To też</p>
  </div>

  <p>To też ma się nie drukować</p>
</div>