2

Estou fazendo um CSS para controlar a impressão de uma página.

A única coisa que vou mostrar na impressão é uma imagem que está na página.

Então no CSS eu fiz assim:

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

Mas o resultado é que ele não mostra nada. Como posso fazer isso com 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>
6
  • Tente body *:not(#imagem-draw).
    – KaduAmaral
    Commented 21/07/2015 às 11:45
  • Depois eu mudei para isso, mas a tela ficou em branco. Commented 21/07/2015 às 11:46
  • Poste o código HTML no corpo da pergunta.
    – KaduAmaral
    Commented 21/07/2015 às 11:46
  • Muito grande. Não é necessário... tem um monte de elemento e uma imagem no meio. <img src="img/imagem.png" alt="Seu Desenho" class="desenho" id="sketch-draw"> Commented 21/07/2015 às 11:49
  • Pois então, não poste o código todo, mas preciso ver a hierarquia até chegar na imagem, não tem como montar um CSS sem saber a estrutura do HTML.
    – KaduAmaral
    Commented 21/07/2015 às 11:49

1 Resposta 1

3

Isso acontece porque você está ocultando também os elementos pais da imagem, você tem que criar uma regra pra cada para não oculta-los:

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>

3
  • Entendi. É verdade. Coloquei no meu arquivo CSS, mas na hora de imprimir, tela branca. Rs Commented 21/07/2015 às 12:35
  • Verifique se o ID da imagem está correto, porque no código da sua pergunta, o ID no CSS é um e no HTML é outro. Verifique também se não tem outro elemento no meio da hierarquia que esteja sendo ocultado. Faça testes mudando as cores de fundo para ver até onde está sendo exibido @DiegoSouza
    – KaduAmaral
    Commented 21/07/2015 às 12:55
  • O ID estava certo, é que eu digitei na mão em vez de copiar e colar, daí eu não coloco o ID que está no HTML. Vou tentar de novo daqui a pouco. Commented 21/07/2015 às 13:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .