Pseudo Class in CSS does not apply Rule

Question

Pseudo Class in CSS does not apply Rule

Navigation

#1 by (3 votes)

2

I'm doing a CSS to control the printing of a page.

The only thing I will show in the print is an image that is 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>

css

asked by anonymous 21.07.2015 / 13:37

1 answer

How to loop posts in WordPress? Nightmares character does not move

score 3 · Accepted Answer

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>