Hide some spans but not all with CSS only

I have the following html

<span id="ctl00">
<span><a class="ms-sitemapdirectional" href="/lnd">Team Site</a></span>
<span> &gt; </spa开发者_运维技巧n>
<span><a class="ms-sitemapdirectional" href="url.aspx">lnd test</a></span>
<span> &gt; </span>
<span class="ms-sitemapdirectional">Portal</span>
</span>

I can't edit and I need to hide the links and the > (>) and only keep the last span (Portal). How can I achieve this with CSS only?

I tried something like:

#ctl00>span {visibility:hidden;}
span.ms-sitemapdirectional {visibility: visible}
a.ms-sitemapdirectional {display: none}

Any ideas? Thanks

Try this:

#ctl00 span { display: none; }
#ctl00 span.ms-sitemapdirectional { display: inline; }