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

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;
}