CSS Negate: Displaying specific elements in a hidden Element?

Question

Assume we have an element that is similar to this

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

Now I want to hide all the elements including the textelements but not the nav-block-2 , so is there a way through which I can do this? Something like using CSS negation?

I tried using

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

but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?

Answer 1

Maybe not what you want but here's what i'd do.

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

EDIT: As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.

Answer 2

Try this

#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 3

Use this:

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

However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2 .