How to select a text node with CSS

The current state of CSS can't do this, check this link: W3C

The problem here is that the content you write to the screen doesn't show up in the DOM :P.

Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.

Check my fiddle and then check the DOM source: JSfiddle

Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.

Bit of a workaround:

h1 {
  color: red;
}
h1 * {
  color: lime;
}

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?

The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.

What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:

h1 {
    background:black;
    color:white;
}

h1 div.sponsor {
    background:white;
    color:black;
}

Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.

I don't believe it would be possible with pure CSS to style just "World" in this situation.

I also met same problem, where I can't touch the markup and have no control with js. I needed to hide a text nodes in a div element, but the element to remain visible. So here is my solution:

markup:

<div id="settings_signout_and_help">
        <a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
            Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>&nbsp;&nbsp;
            <a href="Logout.aspx">Home</a>
                Sign out
        </div>

css:

#settings_signout_and_help {
font-size: 1px !important;
}

#settings_signout_and_help a {
font-size: 13px !important;
}

Hope this helps guys!