CSS selector for text not in tags [duplicate]

Question

I want to totally hide everything in the .byline except the date. Is it possible to do this via CSS w/o modifying the markup? Is there a CSS selector that allows you to target the inner text that's not in tags?

<p class="byline">
    By <a rel="author" href="#">John Doe</a>
    on <time datetime="2012-10-10" pubdate>2012</time>
</p>

This does not work b/c it hides the a but not the other text:

.byline :not(time) { display:none }

This does not work b/c it hides everything:

.byline { display:none }
.byline time { display:inline }

This works but is not ideal b/c then you have to deal with hiding the space too:

.byline { visibility:hidden }
.byline time { visibility:visible }

See: jsfiddle.net/pxxR7/ and jsfiddle.net/pxxR7/1/

Answer 1

CSS can only select elements, not bare text. That is the reason why :not(time) doesn't work (it only selects the a).

The reason why display: none and display: inline don't work is because display: none on a container prevents it and all of its contents from displaying, even if you try to set it to anything else (plus, time already displays inline by default).

Answer 2

you can use font-size DEMO

.byline {font-size:0px; }
.byline time {font-size:15px}