Pseudo Class in CSS Does Not Apply Rule

Question

I’m making a CSS to control the printing of a page.

The only thing I’m going to show in print is an image that’s on the page.

So in CSS I did like this:

*:not(#imagem-draw){
   display: none;
}

But the result is that it shows nothing. How can I do this with CSS ?

---

<div id="content" class="colorir">
    <div class="main">
        <div id="draw-action">
            <div id="desenho">
                <img src="img/imagem.png" alt="" class="desenho" id="sketch-draw">
            </div>
        </div>
    </div>
</div>

Answer 1

This happens because you are also hiding the parent elements of the image, you have to create a rule for each to not hide them:

body > :not(#content),
body > #content > :not(.main),
body > #content > .main > :not(#draw-action),
body > #content > .main > #draw-action > :not(#desenho),
body > #content > .main > #draw-action > #desenho > :not(#imagem-draw){
   display:none;
}

<div id="content" class="colorir">
    <div class="main">
        <div id="draw-action">
            <div id="desenho">
                <img src="//placeholdit.imgix.net/~text?txtsize=33&txt=Sketch+Draw&w=200&h=200" alt="" class="desenho" id="sketch-draw" />
                <img src="//placeholdit.imgix.net/~text?txtsize=33&txt=Imagem+Draw&w=200&h=200" alt="" class="desenho" id="imagem-draw" />
                <p>Teste</p>
            </div>
            <p>Teste</p>
        </div>
        <p>Teste</p>
    </div>
    <p>Teste</p>
</div>
<p>Teste</p>