Is it possible to display:none text which is not in a tag?

I need to get rid of all the text in this div while preserving anything in .

<div class="footer">
Lorem ipsum etc etc etc... <img src="trash.png"> <img src="garbage.jpg">
<a href="something.html">Somewhere</a>
... blah blah <em>blah</em> blah ...
<a href="anotherlink.html>Another Link</a>
... in conclusion earthworms are interesting.
</div>

However when I use this:

.footer :not(a) { display: none; }

the text still remains. I can only use CSS for this, since it’s a userstyle. Is this possible?


solution

Since you can’t select text nodes, one option would be to set the font-size of the parent element to 0, and then re-specify a font-size for the a elements.

Example Here

.footer {
  font-size: 0;
}
.footer :not(a) {
  display: none;
}
.footer a {
  font-size: 16px;
}

.footer {
  font-size: 0;
}
.footer :not(a) {
  display: none;
}
.footer a {
  font-size: 16px;
}
<div class="footer">
  Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
  <a href="something.html">Somewhere</a>
  ... text nodes.. text nodes <strong>text nodes</strong>
  <a href="anotherlink.html">Another Link</a>
  ... some other text node
</div>

Unfortunately, the down-side to this method, is that you will be unable to set the font-size of the a elements using relative em units. * * *

As a side note, it’s worth mentioning that you can also set the visibility of the parent footer element to hidden, and then set the visibility of the children a elements to visible.

Updated Example

This clearly doesn’t achieve the same effect as display: none/display: block, but nonetheless, I thought it would be worth pointing out.

.footer {
  visibility: hidden;
}
.footer a {
  visibility: visible;
}
<div class="footer">
  Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
  <a href="something.html">Somewhere</a>
  ... text nodes.. text nodes <strong>text nodes</strong>
  <a href="anotherlink.html">Another Link</a>
  ... some other text node
</div>