How to hide text without ID? - css

Question

I’m writing a css style for a web page that displays text without id, inside a div. Here’s the bit i’m interested in:
<div class="wal2">
<meta content="***" itemprop="width"></meta>
<meta content="***" itemprop="height"></meta>
text1:
<a target="_blank" href="**********"></a>
<script type="text/javascript"></script>
<br></br>
text2:
<a target="_blank" href="***************"></a>
<br></br>
<table></table>
<br></br>
<br></br>
<img width="16" height="16" border="0" align="absmiddle" alt="" src="/files/color.gif"></img>
text3:
<br></br>
<table cellspacing="0" cellpadding="0"></table>
</div>
I want to know how do i hide ‘ text3:’ without hiding ‘text1: and text2:' with css, using
{ text-indent: 100%; white-space: nowrap; overflow: hidden; }
or { display: none !Important; }, or whatever else.. ?
And if that is not possible, how can i hide all three of them ?

Answer 1

To hide all text nodes (not the preferred solution, but requested nonetheless); you could try to collapse the visibility on the parent div and then restore it on the html elements:
.wal2 {
visibility: collapse;
}
a,
br,
table,
img {
visibility: visible;
}
<div class="wal2">
<meta content="***" itemprop="width"></meta>
<meta content="***" itemprop="height"></meta>
text1:
<a target="_blank" href="**********">link</a>
<script type="text/javascript">alert('script');</script>
<br></br>
text2:
<a target="_blank" href="***************">link</a>
<br></br>
<table></table>
link
<br></br>
<br></br>
<img width="16" height="16" border="0" align="absmiddle" alt="" src="http://lorempixel.com/400/200"></img>
text3:
<br></br>
<table cellspacing="0" cellpadding="0">
<tr>
<td>table cell</td>
</tr>
</table>
</div>