Use CSS to hide non-anchor elements

Question

I have a container that looks like this

<div id="container">This container has a <a href="#">link</a> in it</div>

I want to hide everything in it except the link.

I've tried

#container {display:none;} 
#container a { display:block; }

But that doesn't work.

It's a user style, so I have access only to the CSS. No Javascript. No markup.

Answer 1

It’s not possible with the code you’re currently using. Because the text fragments are text nodes that are only represented by anonymous inline boxes that can not be styled with display separately.

But if you put the text that’s surrounding the a element also in elements, e.g. spans:

<div id="container"><span>This container has a </span><a href="#">link</a><span> in it</span></div>

Then you can do this:

#container span { display: none; }
#container a { display: block; }

Answer 2

Using visibility will work here if you don't mind the invisible, non-linked text still taking up space.

#container {
 visibility: hidden;  
}
#container a {
 visibility:visible;  
}

And if you do need to mimic the display block style, you can try:

#container {
 visibility: hidden;   
 position: relative;
}
#container a {
 visibility:visible;  
 position: absolute;
 top: 0;
 left: 0;
}