Negate CSS: visualizzazione di elementi specifici in un elemento nascosto?

Question

Supponiamo di avere un elemento che è simile a questo

<div id="navigation"> 
    <div class="nav-block-1">....</div> 
    <div class="nav-block-2">....</div> 
    This is the offer 
    <a href="#"> Report </a> 
</div> 

Ora voglio nascondere tutti gli elementi, tra cui le textelements ma non la nav-block-2, quindi c'è un modo attraverso il quale posso fare questo? Qualcosa come usare la negazione CSS?

Ho provato utilizzando

#navigation :not(.nav-block-2) { 
    display:none; 
} 

ma questo sembra negare anche gli elementi all'interno nav-block-2? Sto facendo qualcosa di sbagliato qui? Qualche idea?

Answer 1

Prova questa

#navigation div:not(.nav-block-2) { 
    display:none; 
} 


<div id="navigation"> 
    <div class="nav-block-1">Div 1</div> 
    <div class="nav-block-2">Div 2</div> 
    This is the offer 
    <a href="#"> Report </a> 
</div> 

Answer 2

Forse non quello che volete, ma ecco quello che avrei fatto.

#navigation * { 
    display:none; 
} 
#navigation a { 
    display:inline; 
} 

EDIT: Come si dice nei commenti in tua domanda, penso che sia difficile fare una: non quando non c'è nessun tag attorno al testo.

Answer 3

Utilizzare questa:

#navigation > *:not(.nav-block-2) { 
    display:none; 
} 

Tuttavia, non si può nascondere i nodi di testo singoli. Avrete bisogno di mettere il "Questa è l'offerta" in un paragrafo o almeno in un tag <span> per nasconderlo, o si avrebbe bisogno di nascondere l'intero #navigation che inevitabilmente contiene il .nav-block-2.