htmlcss-selectors

How to select a text node with CSS


I have the following HTML markup:

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

When I use the CSS selector h1 I get Hello World.

I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.

Is there any CSS selector which I can take only the text node? Specifically the World in this example?


Solution

  • 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.